Javascript 在Node.js中拖放和上载图像

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

我有一个表单，允许用户 1.单击“上载图像”并上载图像 2.将图像从其计算机拖动到dropbox以上载图像

一切正常。我跟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>

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

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

示例

var MAX\u FILE\u SIZE=Infinity；//忽略这一点
函数eventImageSetup（）{
$（dropbox）.height（$（'#imageBorder'）.height（））；
fileSelect.addEventListener（“单击”，函数（）{
image.click（）；
}，假）；
fileRemove.addEventListener（“单击”，函数（）{
if（！$（'#preview'）.hasClass（'hidden'）{//如果上传了图像
$（“#预览”）.empty（）；
$（“#dropbox”）.removeClass（'hidden'）；
$（'预览'）.addClass（'隐藏'）；
$（'#fileSelect'）.text（'Upload Image'）；
resetFileInputField（）；
}
删除错误（$（'imageError'），$（'imageError'）；
}，假）；
dropbox.addEventListener（“dragenter”，dragenter，false）；
dropbox.addEventListener（“dragover”，dragover，false）；
dropbox.addEventListener（“drop”，drop，false）；
}//eventImageSetup结束
功能性疏水剂（e）{
e、 停止传播（）；
e、 预防默认值（）；
}
函数dragover（e）{
e、 停止传播（）；
e、 预防默认值（）；
}
功能下降（e）{
e、 停止传播（）；
e、 预防默认值（）；
var dt=数据传输；
var files=dt.files；
手文件（档案）；
}
函数句柄文件（文件）{
var file=files[0]；
//log（“这是文件：”，文件）；
var imageType=/^image\/；
如果（！imageType.test（file.type））{
//一堆代码来处理这个。。。
返回；
}
如果（file.size>最大文件大小）{
//一堆代码来处理这个。。
返回；
}
var img=document.createElement（“img”）；
img.onload=函数（）{
//调整图像大小（img）；
};
$（'#dropbox'）.addClass（'hidden'）；
$（“#预览”）.removeClass（'hidden'）；
$（“#预览”）.empty（）；
$（'预览'）.append（img）；
$（'#fileSelect'）.text（'Replace Image'）；
var reader=new FileReader（）；
reader.onload=函数（e）{
img.src=e.target.result；
}
reader.readAsDataURL（文件）；
}
eventImageSetup（）
#dropbox{
边框：2个虚线；
高度：100px；
宽度：230px；
}

将图像拖放到此处或单击上载

上传图像
删除图像
如果我没弄错的话，您必须在读取文件时附加
onload
事件

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

示例
var MAX\u FILE\u SIZE=Infinity；//忽略这一点
函数eventImageSetup（）{
$（dropbox）.height（$（'#imageBorder'）.height（））；
fileSelect.addEventListener（“单击”，函数（）{
image.click（）；
}，假）；
fileRemove.addEventListener（“单击”，函数（）{
if（！$（'#preview'）.hasClass（'hidden'）{//如果上传了图像
$（“#预览”）.empty（）；
$（“#dropbox”）.removeClass（'hidden'）；
$（'预览'）.addClass（'隐藏'）；
$（'#fileSelect'）.text（'Upload Image'）；
resetFileInputField（）；
}
删除错误（$（'imageError'），$（'imageError'）；
}，假）；
dropbox.addEventListener（“dragenter”，dragenter，false）；
dropbox.addEventListener（“dragover”，dragover，false）；
dropbox.addEventListener（“drop”，drop，false）；
}//eventImageSetup结束
功能性疏水剂（e）{
e、 停止传播（）；
e、 预防默认值（）；
}
函数dragover（e）{
e、 停止传播（）；
e、 预防默认值（）；
}
功能下降（e）{
e、 停止传播（）；
e、 预防默认值（）；
var dt=数据传输；
var files=dt.files；
手文件（档案）；
}
函数句柄文件（文件）{
var file=files[0]；
//log（“这是文件：”，文件）；
var imageType=/^image\/；
如果（！imageType.test（file.type））{
//一堆代码来处理这个。。。
返回；
}
如果（file.size>最大文件大小）{
//一堆代码来处理这个。。
返回；
}
var img=document.createElement（“img”）；
img.onload=函数（）{
//调整图像大小（img）；
};
$（'#dropbox'）.addClass（'hidden'）；
$（“#预览”）.removeClass（'hidden'）；
$（“#预览”）.empty（）；
$（'预览'）.append（img）；
$（'#fileSelect'）.text（'Replace Image'）；
var reader=new FileReader（）；
reader.onload=函数（e）{
img.src=e.target.result；
}
reader.readAsDataURL（文件）；
}
eventImageSetup（）
#dropbox{
边框：2个虚线；
高度：100px；
宽度：230px；
}

将图像拖放到此处或单击上载

上传图像
删除图像
这就是我最初使用它的方式，但不幸的是它没有工作：（这就是我最初使用它的方式，但不幸的是它没有工作：(