从HTML5拖放传递路径上传文件输入字段(Passing path to uploaded file

我工作的一个应用程序（在Node.js的，这是无关紧要的这种情况下），它允许用户上传图片。它使用形式与输入（类型=“文件”）字段工作正常。

不过，我要的是能够上传使用HTML5拖拽图像，而是下降。至于我来这是可以对图像拖动到客户端，并且图像的缩略图显示在一个div。但是我真的需要一些帮助，得到文件上传工作。

事情是，我想用我现在使用和形式（以某种方式）文件的路径传递到输入字段，即流将工作，正是因为它现在做的，但不是通过浏览选择一个文件但我想通过拖放操作将其连接到输入字段。

在下面的JS代码和拖放拖动到的客户端存储在变量“文件”的文件，我能够用“file.name”，“file.type”和“file.size”正是因为与表之前，方式，因为它同样适用。然而，我无法访问这使得它无法访问文件服务器端上传，因为我做的，因为之前以同样的方式将文件“路径”（file.path）。

现在的问题是，是否可以将文件对象传递给输入字段的文件已被拖动到客户端后，这样我就可以点击“提交”，并上传的文件？如果是这样，怎么能这样做？

提前致谢！

保管箱以及我使用上传文件的形式：

<div id='upload'>
    <article>
        <div id='holder'>
            <p id='status'>File API and FileReader API not supported</p>
        </div>
    </article> 

    <form method='post' enctype='multipart/form-data' action='/file-upload'>
        <p>
            <input type='file' name='thumbnail'>
        </p>
        <p>
            <input type='submit'>
        </p>
    </form>
</div>

对于拖放代码：

uploadImage: function(){
    var holder = document.getElementById('holder'),
        state = document.getElementById('status');

    if (typeof window.FileReader === 'undefined') {
      state.className = 'fail';
    } else {
      state.className = 'success';
      state.innerHTML = 'File API & FileReader available';
    }

    holder.ondragover = function () { this.className = 'hover'; return false; };

    holder.ondragend = function () { this.className = ''; return false; };

    holder.ondrop = function (e) {
      this.className = '';
      e.preventDefault();

      var file = e.dataTransfer.files[0],
          reader = new FileReader();

      reader.onload = function (event) {
        holder.style.background = 'url(' + event.target.result + ') no-repeat center';
      };

      reader.readAsDataURL(file);

      return false;
    };
},

Answer 1:

您不能使用输入的文件添加的文件数据。不过，你可以做什么（在其他工艺）是（使用readAsDataURL方法时通过reader.onload事件作为event.target.result，本地有售）使用base64编码数据，并把它变成一个隐藏字段：

HTML

<article>
    <div id='holder'>
        <p id='status'>File API and FileReader API not supported</p>
    </div>
</article> 

<form method='post' enctype='multipart/form-data' action='/file-upload'>
        <input type='file' name='thumbnail' />
        <input type='hidden' name='base64data' />
        <input type='submit' formenctype='application/x-www-form-urlencoded' />
</form>

reader = new FileReader();
reader.onload = function (event) {
    document.getElementById('base64data').setAttribute('value', event.target.result);
};
reader.readAsDataURL(file);

从服务器端，你就可以得到从文件编码数据以base64，只是对其进行解码并根据需要使用它。

提交表格时，你也可以改变“ENCTYPE”属性（通过formenctype属性来完成），然后卸下基本的html文件的输入，因为数据将在后的文本字段。