Question

我正在寻找一些脚本，允许我在上传之前预览图像并删除所选图像，然后再上传。它将被放置在Wordpress前端页面中。我希望图像与其他表单字段一起发布。

(function($) {
  $(document).ready(function() {
    $("#gallery").on('change', function() {
      //Get count of selected files
      var countFiles = $(this)[0].files.length;
      var imgPath = $(this)[0].value;
      var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
      var image_holder = $("#image-holder");
      image_holder.empty();
      if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
        if (typeof(FileReader) != "undefined") {
          //loop for each file selected for uploaded.
          for (var i = 0; i < countFiles; i++) {
            var reader = new FileReader();
            reader.onload = function(e) {
              $("<img />", {
                "src": e.target.result,
                "class": "thumb-image"
              }).appendTo(image_holder);
            }
            image_holder.show();
            reader.readAsDataURL($(this)[0].files[i]);
          }
        } else {
          alert("This browser does not support FileReader.");
        }
      } else {
        alert("Pls select only images");
      }
    });
  });
})(jQuery);

img.thumb-image {
  height: 100px;
  margin: 3px;
  border: 1px solid #cbcbcb;
  padding: 4px;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-primary btn-file">
      <input name="gallery[]" id="gallery" multiple type="file">
    </span>
  </span>
  <div id="image-holder"></div>
</div>

Answer 1

经过一些研究后我发现这是不可能的，所以对于那些像我一样寻找答案的人 - 不要再看了 - 你不会用jQuery实现它。文件输入元素是只读的，不能用脚本编辑它。也许是为了更好。

Answer 2

您无法使用jquery删除文件。但您可以在使用文件api上传之前显示图像（并非在所有浏览器中都支持）

jQuery上传脚本

2 个答案: