将从HTML5上传文件的路径传递到输入字段

Question

我正在开发一个应用程序(在Node.js中,这与这种情况无关),它允许用户上传图像.使用带有input(type ="file")字段的表单可以正常工作.

但是,我想要的是能够使用HTML5拖放来上传图像.就我而言,可以将图像拖到客户端,图像缩略图显示在div中.但是我真的需要一些帮助才能使文件上传工作.

问题是我想使用我现在正在使用的表单,并且(不知何故)将文件的路径传递给输入字段,即流程将完全像现在一样工作,而不是通过浏览选择文件我想通过拖放将它附加到输入字段.

在下面用于拖放的js代码中,拖动到客户端的文件存储在变量"file"中,我可以使用"file.name","file.type"和"file.size"与之前使用表单完全相同的方式.但是,我无法访问文件"path"(file.path),这使得无法访问文件服务器端进行上传,就像之前一样.

问题是,在将文件拖到客户端后,是否可以将文件对象传递给输入字段,以便我可以单击"提交"并上传文件？如果是这样,怎么办呢？

提前致谢!

Dropbox以及我用于文件上传的表单:

<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

您无法使用文件输入来添加文件数据.然而,你可以做的(除了其他技术之外)是使用base64(本身可以通过reader.onload事件获得event.target.result,当使用readAsDataURL方法时)编码数据并将其放入隐藏字段:

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>

JS

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

从服务器端,您将能够从文件中获取base64编码数据,只需对其进行解码并根据需要使用它.

在提交表单时,您还可以更改"enctype"属性(通过formenctype属性完成)并删除基本的html文件输入,因为数据将在文本字段中发布.