Question

我正在尝试创建一个多文件拖放上传，我不想使用任何jQuery插件或任何类型的插件。 DnD和上传工作已经开始了，我只是想在文件上传时将图片从加载更改为复选标记。

我认为不起作用的具体部分是$('#'+i).html(data);返回的数据是<img src="check.png" />。我相信选择器$('#'+i)是造成问题的原因。

<script type="text/javascript">
  $(document).ready(function(){
    $('#drop').change(function(event){
      files = event.target.files;
      $('#drop').css('display', 'none');
      for(var i = 0, len = files.length; i < len; i++) {
        file = files[i];
        if((file.fileName+"").substring((file.fileName+"").length-4,(file.fileName+"").length)=='.mp3'){
        $.ajax({
          type: "POST",
          url: "uploader.php",
          contentType: "multipart/form-data",
          headers: {
            "X-File-Name" : file.fileName,
            "X-File-Size" : file.fileSize,
            "X-File-Type" : file.type
          },
          beforeSend:  function() {
            $('#info').append('<li class="indicator"><span class="label">File Name :</span> '+file.fileName+' | <span class="label">Size :</span> ' + file.fileSize + ' | <div id="'+i+'"><img src="loading.gif" /></div></li>');
          },
          processData: false,
          data: file,
          success: function(data){
            $('#'+i).html(data);
          },error: function(data){
            $('#info').append('Error: ' + data + '<br />');
          }
        });
        }else{
          $('#info').append('Error: Incorrect file type. Looking for .mp3');
        }
      }
    });
  });
</script>

Answer 1

好的，我找到了答案，事实证明我的i变量是每次调用它时的文件数，因为到文件加载完毕时，所有请求都已初始化，这里是固定代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple DnD Uploader</title>
    <link rel="stylesheet" href="style.css" />
    <script type = "text/javascript" src = "../music/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#drop').change(function(event){
          files = event.target.files;
          $('#drop').css('display', 'none');
          for(var i = 0, len = files.length; i < len; i++) {
            file = files[i];
            if((file.fileName+"").substring((file.fileName+"").length-4,(file.fileName+"").length)=='.mp3'){
            $.ajax({
              type: "POST",
              url: "uploader.php?id="+i,
              contentType: "multipart/form-data",
              headers: {
                "X-File-Name" : file.fileName,
                "X-File-Size" : file.fileSize,
                "X-File-Type" : file.type
              },
              beforeSend:  function() {
                $('#info').append('<li class="indicator"><span class="label">File Name :</span> '+file.fileName+' | <span class="label">Size :</span> ' + file.fileSize + ' | <img id="item'+i+'" src="loading.gif" /></li>');
              },
              processData: false,
              data: file,
              success: function(data){
                $('#item'+data).attr('src', 'check.png');
              },error: function(data){
                $('#info').append('Error: ' + data + '<br />');
              }
            });
            }else{
              $('#info').append('Error: Incorrect file type. Looking for .mp3');
            }
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="drop">
      <h1>Drop files here</h1>
      <p>To add them as attachments</p>
      <input type="file" multiple="true" id="filesUpload" />
    </div>
    <div id="info">
    </div>
  </body>
</html>

注意，uploader.php文件在完成上传后，将$_GET['id']回显给ajax调用，然后用于更改该列表项的图像。

多个文件拖放进度更新

1 个答案: