Question

<script type="text/javascript">
  function saveimage(){
      if($('#abc').val() != ''){
        var input = document.getElementById("abc");
        file = input.files[0];
          if(file != undefined){
            formData= new FormData();
              if(!!file.type.match(/image.*/)){
                formData.append("image", file);
                $.ajax({
                  url: "phpupload.php",
                  type: "POST",
                  data: formData,
                  processData: false,
                  contentType: false,
                  success: function(data){
                    //no nothing as of now.
                  }
                });
              }else{
                alert('Not a valid image!');
              }
          }else{
            alert('Image related error, please refresh and try again!');
          }
      }
  }
</script>

这对我有用，但我无法准确理解它的作用。特别是，这些是我的问题：

第5行file = input.files[0];文件数组从何处出现。我从来没有把它初始化。
由于它是一个数组，我正在调用文件[0]，我可以向这个数组添加更多目的地，一次上传多个文件吗？
第7行formData= new FormData(); formData有什么作用？在哪些方面可以使用？
第8行if(!!file.type.match(/image.*/))这一行似乎过滤了上传的文件类型。这是如何运作的？任何对此的引用都会非常有用。
第9行formData.append("image", file);我不知道这是为了什么。
第13行data: formData,我可以将其他帖子变量和formData一起发送到我的php文件吗？
最后，第16行success: function(data){成功似乎是一个关键字，是否存在失败？是什么决定成败？我必须通过我的php文件返回false吗？

谢谢！

Answer 1

如果您也发布了HTML，那么您会注意到它是file输入。它有一个只读files数组，其中包含有关为上传选择的文件的信息（包括文件内容流）。
多个文件支持由浏览器决定（例如HTML5）。第三方控件允许在较旧的浏览器上上传多个文件（例如uploadify），但它们基本上将该过程分成多个上传帖子。
formData只是一个转换为名称/值对的对象，作为Ajax POST调用的一部分发送到服务器。
if(!!file.type.match(/image.*/))只是使用＆＃34;正则表达式＆＃34;来测试文件类型。 Google for＆＃34; regex＆＃34;。 !!只是将一个数字（零或非零）转换为布尔值true / false。
formData.append("image", file);只是将文件流作为名为image的命名属性添加到上传的数据中。这与做类似的事情相同：

formData.image = file;

但内部存储详细信息对您隐藏（您无需关心）。

是的，您可以为发送的数据添加其他值。只需给它们新的名称，并以相同的方式将它们添加到formData对象：

formData.append("some property", someValue);
success是一个需要函数的ajax回调属性。如果Ajax调用从服务器返回而没有错误，则调用它。否则它会调用error回调。

注意：

代码的第一部分是以两种方式冗余地获取输入元素。前几行也可以写成：

var input = $("#abc");              // get the input element as a jQuery element
if(input.val() != ''){              // if it has a value...
     var file = input[0].files[0];  // Get the file from the first DOM element

需要解释此代码，ajax upload

1 个答案: