如何通过拖放上传多个文件并使用ajax浏览

Posted 2023-05-08

【中文标题】如何通过拖放上传多个文件并使用ajax浏览

【英文标题】：how to upload multiple files with drag & drop and browse with ajax

【发布时间】：2019-05-25 19:12:04

【问题描述】：

如何通过拖放上传多个文件并使用 ajax 浏览？ 下面的代码是我目前所拥有的并且效果很好，但只允许上传 1 个文件：

这是html：

<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
      <div id="drag_upload_file">
        <p>DROP FILE HERE</p>
        <p>or</p>
        <p><input class="browse" type="button" value="Browse" onclick="file_explorer();"></p>
        <input type="file" id="selectfile">
      </div>
</div>

以下是我使用的带有 ajax 的 javascript； ：

 var fileobj;
  function upload_file(e) 
    e.preventDefault();
    fileobj = e.dataTransfer.files[0];
    ajax_file_upload(fileobj);
  

  function file_explorer() 
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() 
        fileobj = document.getElementById('selectfile').files[0];
      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) 
          //alert(response);
          $(".success").html(response);
          $('#selectfile').val('');
          $('.myFiles').load(document.URL +  ' .myFiles');

        

      );
    
  

还有上传的php：

$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];

if (!(in_array($_FILES['file']['type'], $arr_file_types))) 
echo "false";
return;

move_uploaded_file($_FILES['file']['tmp_name'], '../uploads/'. $_FILES['file']['name']);

echo "File uploaded successfully.<br /><br />";   

【参考方案1】：

您似乎只获得了要上传的第一个文件“e.dataTransfer.files[0]”。尝试更改为：

  function upload_file(e) 
    e.preventDefault();
    //here you can get all files
    for (var i=0; i< e.dataTransfer.files.length;i++)
      fileobj = e.dataTransfer.files[i];
      ajax_file_upload(fileobj);
    
  

对于浏览，我猜同样的逻辑是有效的

function file_explorer() 
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() 
      //here you can get all files
      for (var i=0; i< e.dataTransfer.files.length;i++)
          fileobj = document.getElementById('selectfile').files[i];
          ajax_file_upload(fileobj);
      
    ;
  

如果导航不起作用，您可以尝试使用 event.target https://developer.mozilla.org/en-US/docs/Web/API/Event/target 到达您的元素

【讨论】：

这适用于拖放！但浏览时不起作用。那么我该如何实现呢？

你可以使用相同的逻辑，我会更新我的答案。

不幸的是，我无法再使用此代码上传任何文件。顺便说一句，Darag & drop 效果很好