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

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

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

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

источник

2011-06-03 mac2017

Где вы в состоянии сделать эту работу? –

Я написал код 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']; 
?>

источник

2011-06-03 19:12:14 Vap0r

Если я перетащил файл в зону перетаскивания, я хотел бы взять эти данные и добавить их в поле ввода файла, которое пользователь обычно щелкает, чтобы получить диалоговое окно файла. Непонятно, как это сделать или если есть какие-либо проблемы с безопасностью. Кроме того, если я правильно понимаю, множественность файлов поступает в виде массива, поэтому отправка формы будет передавать массив связанных с файлом данных. – mac2017

Ну, что вы можете сделать, это просто изменить вызов jQuery на успех: '$ ('# files'). Append (files [data] .fileName);' Если я не понимаю вас , – Vap0r

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

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

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

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

источник

2011-06-20 13:18:36

Вы можете использовать «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/

источник

2011-07-28 18:49:04

<input type=file multiple> 
<div id='dropzone'>Drop Files Here</div>

OnChange и OnDrop событий shuld связать функцию с переменной для получения списка файлов.

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

Read This

источник

2012-08-04 06:52:11

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

ответ

Смежные вопросы