javascript - 在Node.js中进行图像拖放和上传

我正在使用node.js，express，猫鼬。

我有一个允许用户选择的表格
1.点击“上传图片”并上传图片
2.将图像从其计算机拖到保管箱中以上传图像


可以正常工作。我在使用2时遇到问题。基本上，我可以将图像拖放到放置区中，但是在提交表单时，实际上从未上传图像。我读了很多书，但似乎找不到解决方法。


我知道dropzone.js，但决定不使用它只是为了学习如何自行执行此操作。

这是我的保管箱的外观（只是为了您理解代码）：


基本上，当用户单击上载或将图像拖动到保管箱时，该图像就会出现在预览中。这可行。

这是我的代码的相关部分：

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上，但是显然出于安全问题您不能这样做。基本上，我会继续阅读无法以编程方式添加文件的信息。

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

最佳答案

如果我没记错的话，您必须附加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"的按钮元素在单击时不会提交表单。