問題描述

我正在開發(fā)一個允許用戶上傳圖像的應(yīng)用程序(在 Node.js 中，與本例無關(guān)).使用帶有輸入 (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 拖放來上傳圖像.據(jù)我所知，可以將圖像拖動到客戶端，并且圖像縮略圖顯示在 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.

問題是我想使用我現(xiàn)在正在使用的表單，并且(以某種方式)將文件的路徑傳遞給輸入字段，即流程將完全像現(xiàn)在一樣工作，但不是選擇一個通過瀏覽文件我想通過拖放將其附加到輸入字段.

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.type"和file.size" 與之前使用表單的方式完全相同.但是，我無法訪問文件路徑"(file.path)，這使得無法訪問文件服務(wù)器端進行上傳，就像我之前那樣.

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?

提前致謝！

Dropbox 以及我用于文件上傳的表單:

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

推薦答案

不能使用文件輸入添加文件數(shù)據(jù).不過，您可以做的(在其他技術(shù)中)是使用 base64(在使用 readAsDataURL 方法時，可以通過 reader.onload 事件作為 event.target.result 本地獲得)) 編碼數(shù)據(jù)并將其放入隱藏字段:

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);

從服務(wù)器端，您將能夠從文件中獲取 base64 編碼數(shù)據(jù)，只需對其進行解碼并根據(jù)需要使用它.

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 文件輸入，因為數(shù)據(jù)將發(fā)布在文本字段中.

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.

這篇關(guān)于從 HTML5 拖動和傳遞上傳文件的路徑拖放到輸入字段的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！