从HTML5拖放传递上传文件的路径下拉到输入字段 [英] Passing path to uploaded file from HTML5 drag & drop to input field

问题描述

我正在处理一个应用程序（在Node.js中，与这种情况无关），允许用户上传图像。它使用带有输入（type =file）字段的表单正常工作。

I'm working on an application (in Node.js, which is irrelevant for this case) which allows the user to upload an image. It works fine using a form with an input (type="file") field.

然而，我想要的是使用HTML5拖动上传图像下降。就我来说，可以将图像拖动到客户端，图像缩略图显示在div中。但是，我真的需要一些帮助来获取文件上传工作。

However, what I want is to be able to upload an image using HTML5 drag and drop instead. As far as i've come it's possible to drag an image to the client, and the image thumbnail is displayed in a div. However I really need some help with getting the file upload working.

事情是，我想使用我现在使用的表单，（以某种方式）将文件的路径传递到输入字段，即流程将按照现在的方式正常工作，而不是通过浏览选择文件，我想通过拖放将其附加到输入字段。

The thing is that I want to use the form that i'm using right now, and (somehow) pass the file's path to the input field, i.e. the flow will work exactly as it do now, but instead of choosing a file by browsing it I want to attach it to the input field by drag and drop.

在下面的js代码中拖放拖放到客户端的文件存储在变量file中，我可以使用file.name，file。类型和file.size与之前的表单完全一样。但是，我无法访问文件path（file.path），这使得无法访问文件服务器端，以便像以前一样执行上传。

In the js code below for drag and drop the file that was dragged to the client is stored in the variable "file", and i'm able to use "file.name", "file.type" and "file.size" exactly the same way as it works since before with the form. However, I can't access the files "path" (file.path) which makes it impossible to access the file server side for uploading the same way as I do it since before.

问题是，文件被拖到客户端之后是否可以将文件对象传递给输入字段，以便我可以点击提交并上传文件？如果是这样，那么可以怎么做？

The question is, is it possible to pass the file object to the input field after the file has been dragged to the client, so that I can click on "submit" and upload the file? If so, how could this be done?

提前感谢！

保存箱以及表单我正在使用文件上传：

the dropbox as well as the form i'm using for file uploads:

<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;
    };
},

推荐答案

您不能使用该文件输入添加文件数据。
然而，您可以做的（除其他技术之外）是使用base64（通过reader.onload事件本机可用）作为 event.target.result ，当使用 readAsDataURL 方法）编码的数据并将其放入隐藏的字段中：

You cannot use the file input to add the file data. Nevertheless, what you can do (among other technics) is to use the base64 (natively available through the reader.onload event as event.target.result, when using readAsDataURL method) encoded data and put it into an hidden field :

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编码的数据，只需解码它可以根据您的需要使用。

From the server side you'll be able to get the base64 encoded data from the file, just decode it and use it as you want.

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

While submitting the form, you could also change the "enctype" attribute (done through the formenctype attribute) and remove the basic html file input, since the data will be post in a text field.

这篇关于从HTML5拖放传递上传文件的路径下拉到输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！