圖像在Node.js中拖放和上傳

Question

我正在使用node.js，express，mongoose。

我有一個允許用戶使用的表單1.單擊“上傳圖像”並上傳圖像2.將圖像從計算機拖到保管箱中以上傳圖像

1. 按預期工作。 我遇到麻煩2.基本上，我可以將圖像放入dropzone，但是當提交表單時，圖像從未實際上傳 。 我讀了很多，但似乎無法找到解決方案。

我知道dropzone.js，但決定不使用它只是為了學習如何自己做。

這就是我的Dropbox的樣子（只是讓你理解代碼）：

基本上，當用戶點擊上傳或將圖像拖放到保管箱中時，它會顯示在預覽中。 這有效。

以下是我的代碼的相關部分：

new.ejs

<input name="image" type="file" id="image" accept="image/*" style="display:none" onchange="handleFiles(this.files)">

   <div id="imageBorder" >
        <div id="imageContainer">

             <div id="dropbox">
                   <i class="fa fa-picture-o" aria-hidden="true"></i>
                    <p> Drop image here or click to upload</p>
             </div>

             <div id="preview" class="hidden">
             </div>

             <button id="fileSelect" class="btn btn-primary btn-block">Upload Image</button>
            <button id="fileRemove" class="btn btn-primary btn-block">Remove Image</button>

</div>

eventform.js

function eventImageSetup() {

var dropbox = document.getElementById("dropbox"),
    fileElem = document.getElementById("image"),
    fileSelect = document.getElementById("fileSelect"),
    fileRemove = document.getElementById("fileRemove");

$(dropbox).height($('#imageBorder').height());

fileSelect.addEventListener("click", function(e) {
    if (fileElem) {
      fileElem.click();
      e.preventDefault(); // to prevent submit
    }
}, false);

fileRemove.addEventListener("click", function(e) {
    e.preventDefault(); // prevent submit
    if(!$('#preview').hasClass('hidden')) { // If there is an image uploaded
        $('#preview').empty(); 
        $('#dropbox').removeClass('hidden');
        $('#preview').addClass('hidden');
        $('#fileSelect').text('Upload Image');
        resetFileInputField();
    }
    removeError($('#imageError'), $('#image'));
});

dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

} // end of eventImageSetup


function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  handleFiles(files);
}

  function handleFiles(files) { 


    var file = files[0];

    console.log("This is the file: ", file);

    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
      // a bunch of code to deal with this...
      return;
   } else if (file.size > MAX_FILE_SIZE) {
      // a bunch of code to deal with this..
     return; 
 } else {

      var img = document.createElement("img");
      img.onload = function() {
            adjustImageSize(img);
      };
      $('#dropbox').addClass('hidden');
      $('#preview').removeClass('hidden');
      $('#preview').empty();
      $('#preview').append(img);
      $('#fileSelect').text('Replace Image');
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(event) {
          img.src = event.target.result;
      }
  }
}

正如您所看到的，問題是在拖放時， 我實際上從未將文件附加到表單元素 。 我嘗試將文件附加到$（'＃image'）。文件，但顯然你無法解決安全問題。 基本上我繼續閱讀我無法以編程方式添加文件。

任何指導將不勝感激...

Answer 1

如果我沒弄錯，你必須在讀取文件之前附加onload事件。

  var reader = new FileReader();
  reader.onload = function(event) {
      img.src = event.target.result;
  }
  reader.readAsDataURL(file);

例

 var MAX_FILE_SIZE = Infinity; // ignore this function eventImageSetup() { $(dropbox).height($('#imageBorder').height()); fileSelect.addEventListener("click", function() { image.click(); }, false); fileRemove.addEventListener("click", function() { if (!$('#preview').hasClass('hidden')) { // If there is an image uploaded $('#preview').empty(); $('#dropbox').removeClass('hidden'); $('#preview').addClass('hidden'); $('#fileSelect').text('Upload Image'); resetFileInputField(); } removeError($('#imageError'), $('#image')); }, false); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); } // end of eventImageSetup function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } function handleFiles(files) { var file = files[0]; //console.log("This is the file: ", file); var imageType = /^image\\//; if (!imageType.test(file.type)) { // a bunch of code to deal with this... return; } if (file.size > MAX_FILE_SIZE) { // a bunch of code to deal with this.. return; } var img = document.createElement("img"); img.onload = function() { //adjustImageSize(img); }; $('#dropbox').addClass('hidden'); $('#preview').removeClass('hidden'); $('#preview').empty(); $('#preview').append(img); $('#fileSelect').text('Replace Image'); var reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; } reader.readAsDataURL(file); } eventImageSetup(); 

 #dropbox { border: 2px dashed; height: 100px; width: 230px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="image" type="file" id="image" accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <div id="imageBorder"> <div id="imageContainer"> <div id="dropbox"> <i class="fa fa-picture-o" aria-hidden="true"></i> <p> Drop image here or click to upload</p> </div> <div id="preview" class="hidden"> </div> <button id="fileSelect" type="button" class="btn btn-primary btn-block">Upload Image</button> <button id="fileRemove" type="button" class="btn btn-primary btn-block">Remove Image</button> </div> 

側面的言論

• 具有ID屬性（不包含任何破折號）的元素可以使用其ID值在JavaScript中引用。 例如，可以使用fileSelect而不是document.getElementById('fileSelect')訪問<input id="fileSelect"> 。
• type="button"按鈕元素不會在點擊時提交表單。