Home/ Questions/Q 5942809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:18:20+00:00

I’m trying to create a multiple file drag and drop upload, I don’t want

  • 0

I’m trying to create a multiple file drag and drop upload, I don’t want to use any plugins for jQuery or anything of the sort. The DnD and upload is already working, I’m just trying to change a picture from loading to a check mark upon file upload.

The specific part that I believe not to be working is this $('#'+i).html(data); The data returned is <img src="check.png" />. I believe the selector $('#'+i) is what is causing the issue.

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    <!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>

    Note, the uploader.php file, upon completion of uploading, echoes $_GET['id'] back to the ajax call, which is then used to change that list item’s image.

    • 0