Question

我正在尝试制作一个脚本，以使用ajax上传多个文件，并在屏幕上显示带有加载圆圈的显示。

该脚本适用于一个文件，但是我很难使它适用于多个文件。我猜这是一个“范围”问题。但是我的JS知识不是那么好。

此外，我只使用标准的JS，没有jQuery。

这是脚本：

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
        <nav>
            <ul class="navbar">
                <li class="nav-item">
                    <a href="#home">
                    <i class="fas fa-home"></i>
                    <p>Home</p>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="page active-page" id="home">

    </div>

对不起，您的代码松散。如果在循环期间检查xhr readyState和状态，则第一个为1和0，那么最后一个为好。

您会看到我正在为每个上传的文件创建一个新的div，因此我可以在其中打印缩略图。

据我了解，代码正在处理，而ajax请求尚未完成。结果是我只能看到我提交的最后一个文件。

如果我在xhr.open上的async标志上设置了false，它可以工作，但是它当然不会显示加载的gif。

谢谢您的帮助。

Answer 1

您应该在单独的函数中提取AJAX功能的代码-否则xhr.onload的闭包将使用index_div的当前值（在调用时）-最有可能是FOR循环。同样，querySelector返回一个集合-即使它只找到一个元素，或者什么也没找到。另外，您应同时使用event.dataTransfer和event.target来处理拖放和正常点击。

var dropper = document.getElementById('upload');

dropper.addEventListener('dragover', function(e) 
{
  e.preventDefault();
    dropper.style.background = '#eee';
}, false);

dropper.addEventListener('dragenter', function() 
{
  e.preventDefault();
    dropper.style.background = '#eee';
}, false);

dropper.addEventListener('dragleave', function() 
{
  e.preventDefault();
    dropper.style.background = '#fff';
}, false);

dropper.addEventListener('drop', uploadFile, false);
document.getElementById('file_upload').addEventListener('change', uploadFile, false);

function uploadFile(e) 
{
  e.preventDefault();
    dropper.style.background = '#fff';
    dropper.style.borderStyle = 'dashed';
    var files = (e.dataTransfer || e.target).files,
        filesLen = files.length;
    for (var i = 0 ; i < filesLen ; i++) 
    {
        if(files[i] != '')
        {
            var newDiv = document.createElement("div");
            newDiv.setAttribute("class","image_div");
            newDiv.innerHTML = '<img id="chargement" src="../includes/chargement.gif"/>';
            document.getElementById("upload").appendChild(newDiv); 

        doAJAX(newDiv,files[i]);
      }
    }
}

function doAJAX(div,file)
{
  var form = new FormData();
  form.append('file', file);

  if(window.XMLHttpRequest)
  {
      xhr=new XMLHttpRequest();
  }
  else if(window.ActiveXObject)
  {
      xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open('POST', "./traitement_upload.php", true);
  xhr.onload = function (e) 
  {
    if(xhr.readyState==4 && xhr.status==200)
    {
      div.innerHTML = xhr.responseText;
    }
  }
  xhr.send(form);
}

用ajax上传多个文件

1 个答案: