HTML5拖放和多個文件上傳

我有一個HTML表單，其中包含一個文件輸入字段與多個文件選擇，我也有一個拖放功能，我也在工作。我的問題是如果甚至有可能無縫地集成這兩個功能？HTML5拖放和多個文件上傳

理想情況下，我希望用戶通過拖放或通過文件對話框選擇他們的文件。用戶完成選擇文件後，點擊表單提交按鈕上傳。

我想我的主要不確定性是如何綁定被拖放到文件輸入字段的表單提交的文件。

2011-06-03 mac2017

在那裏你能完成這項工作？ – 2017-11-07 00:43:02

我寫了一些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 2011-06-03 21:33:01

那麼，你可以做的只是改變jquery的成功調用是這樣的： '$（'＃files'）。append（files [data] .fileName）;' 除非我誤解你。 – Vap0r 2011-06-04 16:38:04

我不完全知道你是如何做的，所以我會告訴你，我做的方式，然後嘗試回答你的問題。

設置事件偵聽器的丟棄和<輸入>的更改事件。
- 用於丟棄：filesUpload.addEventListener("change", function() {traverseFiles(this.files);}, false);
- 爲<輸入>：dropArea.addEventListener("drop", function (evt) {traverseFiles(evt.dataTransfer.files);}, false);
traverseFiles您在上面看到的是，得到一個FileList（一個的File列數組）的函數，其是File API的一部分。該功能然後爲每個File調用功能uploadFile。通過ajax（XMLHttpRequest.send(file)）異步發送File。

現在回答你的問題如何將丟棄的文件綁定到輸入字段：你不這樣做，你只是做它的其他方式。您創建一個用於上傳文件的API或包裝器，然後如果用戶丟棄文件，則調用該包裝函數。如果用戶點擊<輸入>字段，則再次調用該包裝（就像我對traverseFiles所做的那樣）。

有意義嗎？如果沒有，告訴我哪個部分，我會編輯這個答案/展開它。

來源

2011-06-20 13:18:36

你可以使用「HTML5的文件，上傳」，它聲稱做你的需要，以及優雅降級爲舊版瀏覽器：

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>

平變化和ondrop事件shuld功能綁定變量獲取文件列表。

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

Read This

來源

2012-08-04 06:52:11

HTML5拖放和多個文件上傳

回答

相關問題