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

Question

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

我有一個表單，允許用戶要麼 1.點擊「上傳圖片」並上傳圖片 拖到從他們的計算機圖像到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'）。文件，但顯然你不能這樣做的安全問題。基本上我繼續讀，我不能以編程方式添加文件。

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

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值。例如，可以使用fileSelect而不是document.getElementById('fileSelect')來訪問<input id="fileSelect">。
• 帶有type="button"的按鈕元素不會在點擊時提交表單。