Обновление нескольких перетаскиваний файлов - PullRequest
Новая
       8

Обновление нескольких перетаскиваний файлов

0 голосов
/ 21 мая 2011

Я пытаюсь создать несколько файлов перетаскиванием, я не хочу использовать плагины для 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>

1 Ответ

1 голос
/ 22 мая 2011

Хорошо, ребята, я разобрался с ответом, оказалось, что моей переменной 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, который затем используется для изменения изображения этого элемента списка.

...