Question

浏览时如何使用ajax上传多个文件？

这是我的html：

<p><input class="browse" type="button" value="Browse" onclick="file_explorer();"></p>
<input type="file" id="selectfile" multiple>

还有js：

function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function() {
            for (var i=0; i< e.dataTransfer.files.length;i++){ // multiple files
              fileobj = document.getElementById('selectfile').files[i];
              ajax_file_upload(fileobj);
            }
        };
    }

 function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData(); 
        form_data.append('file', file_obj);
      $.ajax({

        type: 'POST',
        url: 'ajax.php',
        contentType: false,
        processData: false,
        data: form_data,

        success:function(response) {
          $(".success").html(response);
          $('#selectfile').val('');

        }

      });
    }
  }

下面的代码对1个文件确实有效：

function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function()                 
              fileobj = document.getElementById('selectfile').files[0];
              ajax_file_upload(fileobj);

        };
    }

我尝试了多个，但不幸的是，它不起作用：

function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function() {
            for (var i=0; i< e.dataTransfer.files.length;i++){
              fileobj = document.getElementById('selectfile').files[i];
              ajax_file_upload(fileobj);
            }
        };
    }

我如何才能针对多个文件正常工作？

Answer 1

好吧，在您的代码中没有定义错误e，因此可以用e.dataTransfer来更改this ..请参见下面的示例

document.getElementById('selectfile').onchange = function() {
  for (var i=0; i< this.files.length;i++){
    fileobj = document.getElementById('selectfile').files[i];
    console.log(fileobj.name);
    //ajax_file_upload(fileobj);
  }
};

<input type="file" id="selectfile" multiple>

Answer 2

我可以通过对您的代码进行一些小的更改来使其工作： 1. e未定义-因此让e = document.getElementById（'selectfile'） 2.将e.dataTransfer.files.length替换为e.files.length

如何使用Ajax和资源管理器上传多个文件

2 个答案: