Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ok guys, I figured out the answer, it turns out that my i variable was the number of files each time I called it, since by the time the files had finished loading, all the requests had been initialized, here is the fixed code.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Multiple DnD Uploader&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;script type = "text/javascript" src = "../music/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#drop').change(function(event){ files = event.target.files; $('#drop').css('display', 'none'); for(var i = 0, len = files.length; i &lt; 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('&lt;li class="indicator"&gt;&lt;span class="label"&gt;File Name :&lt;/span&gt; '+file.fileName+' | &lt;span class="label"&gt;Size :&lt;/span&gt; ' + file.fileSize + ' | &lt;img id="item'+i+'" src="loading.gif" /&gt;&lt;/li&gt;'); }, processData: false, data: file, success: function(data){ $('#item'+data).attr('src', 'check.png'); },error: function(data){ $('#info').append('Error: ' + data + '&lt;br /&gt;'); } }); }else{ $('#info').append('Error: Incorrect file type. Looking for .mp3'); } } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="drop"&gt; &lt;h1&gt;Drop files here&lt;/h1&gt; &lt;p&gt;To add them as attachments&lt;/p&gt; &lt;input type="file" multiple="true" id="filesUpload" /&gt; &lt;/div&gt; &lt;div id="info"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Note, the uploader.php file, upon completion of uploading, echoes <code>$_GET['id']</code> back to the ajax call, which is then used to change that list item's image.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload