Node.js 中的图像拖放和上传

Question

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

我有一个表单允许用户 1.点击“上传图片”，上传一张图片 2. 将自己电脑中的图片拖入dropbox上传图片

1. 按预期工作。我在使用 2 时遇到了问题。基本上，我可以将图像拖放到 dropzone 中，但是提交表单时，图像实际上从未上传。我读了很多，但似乎找不到解决方案。

我知道 dropzone.js，但决定不使用它只是为了学习如何自己做。

这是我的 Dropbox 的样子（只是为了让您理解代码）：

基本上，当用户单击上传或将图像拖入 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').files，但显然出于安全问题您不能这样做。基本上我一直在阅读我无法以编程方式添加文件。

任何指导将不胜感激......

Answer 1

如果我没记错的话，你必须附上onload事件before你读了文件。

  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 值在 JavaScript 中引用具有 ID 属性（不包含任何破折号）的元素。例如，<input id="fileSelect"> 可以使用fileSelect 而不是document.getElementById('fileSelect') 访问。
• 带有type="button" 的按钮元素在点击时不会提交表单。