我正在使用 Node.js、express、mongoose。
我有一个表单,允许用户 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"
的按钮元素点击后不会提交表单。
关于javascript - Node.js 中的图像拖放和上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42597642/