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拖放和多个文件上传

回答

相关问题