面对上传多文件使用FormData和jQuery Ajax的问题

Question

你能否看看这段代码，通过使用 jQuery Ajax <发送form的两个输入，让我知道我遗漏/做错了什么/ strong>和formData？

从技术上讲，我想预览图像并对它们进行一些更新，例如删除或重新排序，然后将它们上传到服务器，但我得到的是这个错误

  

未捕获的TypeError：非法调用

jQuery上的

var value = isFunction(valueOrFunction) ?
  valueOrFunction() :
  valueOrFunction;

以下是代码

＆＃13;

＆＃13;

function previewImages() {

  var $preview = $('#preview').empty();
  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {

    if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
      return alert(file.name + " is not an image");
    } // else...

    var reader = new FileReader();

    $(reader).on("load", function() {
      $preview.append($("<img/>", {
        src: this.result,
        height: 100
      }));
    });

    reader.readAsDataURL(file);

  }

}

$('#file-input').on("change", previewImages);

$("#btn-upload").on("click", function() {

  var fd = new FormData($('form')[0]);
 
  var request = $.ajax({
    type: "POST",
    url: "upload.php",
    data: fd,
    cache: false,
    beforeSend: function() {

    }
  });

  request.done(function(data) {

  });

  request.fail(function(jqXHR, textStatus) {
    console.log("Request failed: " + textStatus);
  });
});

＆＃13;

body{
  padding:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form id="uploader" action="#" method="post">
    Package Name
    <input id="package" type="text" />
    <br /> 
    Package Images <input id="file-input" type="file" multiple>
  </form>
</div>

<div class="well">
  <div id="preview"></div>
</div>

<div class="well">
  <button class="btn btn-success" id="btn-upload">
    Now Upload
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;