选择多个图像并上传预览

Question

我需要添加多张图片才能上传。以下是我的表格。在表单中，如果您检查运行代码段，当我逐个上传图片时，显示预览的图片但没有图片的图片不会增加（此处显示2文件虽然共有4个图像存在）。但是当我一次选择多个图像时，则不显示所选图像。

在附图中，它显示4个图像，但没有计数仅显示2个文件。这就是问题所在。

我想知道，当我逐个选择图像，即单击并选择一张图像时，是否可以增加文件数量？

Find <- function(argument){
       Body
      }

dna_converter <- function(input_string){
gsub("T", "U", x=input_string)
rna_triplets<-substring(input_string, seq(1, 22, 3), seq(3, 24, 3))
return(rna_triplets)
}

Triplets <- dna_converter(dna_string)

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

Answer 1

这是因为您依赖于浏览器的默认<input>的UI，该UI仅显示其当前内容。

因此，如果您要上传所有已选中的文件，请在每次更改时创建一个存储所有文件的数组。

然后，要将其发送到您的服务器，您将通过屏蔽其<form>事件并通过{{3发送填充了您的文件的FormData来阻止submit的默认行为}}

$(document).ready(function() {
  // First define the Array where we will store all our files
  var myFiles = [];
  // now, every time the user selects new Files,
  $("#files").on("change", function(e) {
    var files = e.target.files, file;
    // iterate through all the given files
    for (var i = 0; i < files.length; i++) {
      file = files[i];
      myFiles.push(file); // store it in our array
      $('<span class="pip">' +
        '<img class="imageThumb" ' +
        // no need for a FileReader here,
        //  a blobURI is better (sync & uses less memory)
        'src="' + URL.createObjectURL(file) + '" ' +
        'title="' + file.name + '"/>' +
        '<br/>' +
        '<span class="remove">Remove image</span>' +
        '</span>')
      .insertAfter("#files")
      // add the event listener only on the new .remove
      .find(".remove").click(removeFile.bind(null, file));
    }
    updateCounters();
  });

  // now override the default form submission
  $('form').on('submit', upload);

  // removes both the preview elements from doc and the file from our array
  function removeFile(file, evt) {
    $(evt.target).parent(".pip").remove();
    myFiles.splice(myFiles.indexOf(file), 1);
    updateCounters();
  }
  // ...
  function updateCounters() {
    $('#counter').text(myFiles.length + ' files selected');
  }
  // from submission overriding function
  function upload(evt) {
    evt.preventDefault(); // first block the default event
    var fd = new FormData(); // create a new FormData
    for (var i = 0; i < myFiles.length; i++) {
      fd.append('files[]', myFiles[i]); // append all our files to it
    }
    // Post the formdata through XHR
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'YOUR_FORM_ACTION_URL');
    // if you wanted to do something after the files are submitted
    // xhr.onload = callback;
    xhr.send(fd);
  }
});

input[type="file"] {
  display: block;
}

.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}

.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}

.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}

.remove:hover {
  background: white;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>Upload your images</h3>
  <span id="counter">0 files selected</span>
  <input type="file" id="files" name="files[]" multiple /><br>
  <input type="submit" name="submit" value="Submit">
</div>