2011-05-21 94 views
0

我想創建一個多文件拖放上傳,我不想使用任何插件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> 
+0

你可以發佈整個html頁面源代碼或url的地方嗎? – microspino 2011-05-21 13:29:20

+0

@microspino,[here](http://vapor.ne8us.com/ubad/upload.php) – Vap0r 2011-05-21 19:15:56

回答

1

好球員,我想出了答案,事實證明,我的我的變量是每次我把它叫做文件的數量,因爲由當時的文件已加載完畢,所有的請求都被初始化,這裏是固定的代碼。

<!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調用,然後將其用於更改列表項的形象。

+0

注意'id'屬性不應該只是一個數值。見:http://j.mp/mvbhxf – 2011-05-22 13:15:15

+0

@passcod謝謝!更新。 – Vap0r 2011-05-22 23:33:06