HTML5 перетаскивание и загрузка нескольких файлов - PullRequest
Новая
       7

HTML5 перетаскивание и загрузка нескольких файлов

4 голосов
/ 03 июня 2011

У меня есть HTML-форма, которая содержит поле ввода файла с возможностью выбора нескольких файлов, а также у меня есть функция перетаскивания, над которой я также работаю.Мой вопрос заключается в том, как без проблем интегрировать обе эти функции, если это возможно?

В идеале, я бы хотел, чтобы пользователь выбирал свои файлы либо с помощью drag'n'drop, либо через диалоговое окно файла.Как только пользователь завершит выбор своих файлов, нажмите кнопку отправки формы для загрузки.

Я предполагаю, что основная неопределенность, которая у меня есть, заключается в том, как связать файлы, которые были перетащены и отброшены, в поле ввода файла для отправки формы.

Ответы [ 4 ]

0 голосов
/ 04 августа 2012 
<input type=file multiple>
<div id='dropzone'>Drop Files Here</div>

События onchange и ondrop должны связать функцию с переменной для получения списка файлов. 

var files=e.target.files||e.dataTransfer.files

Читать это

0 голосов
/ 20 июня 2011

Я не совсем уверен, как вы это делаете, поэтому я расскажу вам, как я это делаю, а затем постараюсь ответить на ваш вопрос.

  1. Настройка прослушивателей событий для отбрасывания и изменения .
    • для сбрасывания: filesUpload.addEventListener("change", function () {traverseFiles(this.files);}, false);
    • для : dropArea.addEventListener("drop", function (evt) {traverseFiles(evt.dataTransfer.files);}, false);
  2. traverseFiles, которую вы видите выше, - это функция, которая получает FileList (массив File s), которые являются частью File API . Затем эта функция вызывает функцию uploadFile для каждого File.
  3. uploadFile отправляет File асинхронно через ajax (XMLHttpRequest.send(file)).

Теперь, чтобы ответить на ваш вопрос как связать удаленные файлы с полем ввода : нет, вы просто делаете это по-другому. Вы создаете API или оболочку для загрузки файлов, а затем, если пользователь удаляет файлы, вы вызываете эту функцию оболочки. Если пользователь нажимает на поле , вы снова вызываете эту оболочку (как я сделал с traverseFiles).

Имеет смысл? Если этого не произойдет, скажите мне, какую часть, и я отредактирую этот ответ / расширил его.

0 голосов
/ 28 июля 2011

Вы можете использовать «HTML5-File-Uploader», который предназначен для того, чтобы делать то, что вам нужно, а также изящно деградировать для старых браузеров:

https://github.com/gre/HTML5-File-Uploader/wiki

Я не пробовалсебя.

В качестве альтернативы, вы можете взглянуть на эту страницу, которая предоставляет весь код, который вам необходим, чтобы сделать это самостоятельно:

http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

0 голосов
/ 03 июня 2011

Я написал некоторый код jQuery, который делает именно это, скажите мне, работает ли он у вас. 

<!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++) {
            if((files[i].fileName+"").substring((files[i].fileName+"").length-4,(files[i].fileName+"").length)=='.mp3'){
            $.ajax({
              type: "POST",
              url: "uploader.php?id="+i,
              contentType: "multipart/form-data",
              headers: {
                "X-File-Name" : files[i].fileName,
                "X-File-Size" : files[i].fileSize,
                "X-File-Type" : files[i].type
              },
              beforeSend:  function() {
                $('#info').append('<li class="indicator"><span class="label">File Name :</span> '+files[i].fileName+' | <span class="label">Size :</span> ' + files[i].fileSize + ' | <img id="'+i+'" src="loading.gif" /></li>');
              },
              processData: false,
              data: files[i],
              success: function(data){
                $('#'+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>

И файл PHP выглядит так: 

<?php
  $headers = array();
  foreach ($_SERVER as $k => $v){   
    if(substr($k, 0, 5) == "HTTP_"){
      $k = str_replace('_', ' ', substr($k, 5));
      $k = str_replace(' ', '-', ucwords(strtolower($k)));
      $headers[$k] = $v;
    }
  } 
  $file = new stdClass;
  $file->name = basename($headers['X-File-Name']);
  $file->size = $headers['X-File-Size'];
  $file->content = file_get_contents("php://input");
  if(file_put_contents('files/'.$file->name, $file->content))
    echo $_GET['id'];
?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...