如何删除在Javascript中上传的图像？

我正在开发我的第一个networking应用程序。 它允许用户发布在该地区发生的事件，类似于eventbrite。 我正在使用NodeJS，Express，Mongo。

我创build了一个表单，允许用户input事件详细信息，并上传与事件相关的图像。

它看起来像下面这样：

如果用户上传图片然后提交，我成功地pipe理存储图像。 当用户想查看提交的事件时，图像出现。

我的问题如下：

1. 用户填写表格并上传图片
2. 用户决定他不想要一个与事件相关的图像
3. 用户点击删除图像（图像似乎已被删除 – 即图像预览是灰色的，并说“放下图像在这里或点击上传”）
   4. 用户提交事件。
   5. 用户查看事件。 “已删除”的图像在那里 。 换句话说，图像永远不会被删除。

我似乎无法弄清楚如何实际删除图片一旦上传。

这是我的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> </div> <!-- END OF imageBorder --> 

请注意，我在imageContainer中有两个div，一个隐藏的预览div和一个dropbox div。

现在这里是我的.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'); } removeError($('#imageError'), $('#image')); }); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); } .... .... function handleFiles(files) { var file = files[0]; ... //some code for error checking here - deleted it for now var img = document.createElement("img"); img.id = "uploadedImage"; img.file = file; 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(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } 

基本上，在前端，当用户上传图像时，图像标签被创build并插入到预览中。 “隐藏”类从预览中删除，“隐藏”类添加到保存框中。 因此图像出现。

当删除图像被点击时，从预览中删除，预览被隐藏，隐藏类从保pipe箱中删除。 也就是说，看起来图像已被删除。

但是，一旦表单被提交，req.file不是空的。

这是路由节点文件的一部分（我用multer上传图像 – 无关紧要）

 router.post("/", middleware.isLoggedIn, upload.single('image'), function(req,res) { var filepath = undefined; if(req.file) { // THIS IS TRUE... REQ.FILE is not empty.... filepath = req.file.path.substr(7); // Substr to remove "/public" } .... .... } 

有没有人有什么build议？ 我想真正理解当我说reader.readDataAsURL（我认为这是什么保存文件？）我正在阅读一些stackoverflowpost，但不能理解build议的解决scheme或解释…

Answer 1

select一个图像只会显示在浏览器中，但实际上并没有上传。 这只是在表单提交后才发生。 并根据您的代码，用户点击“删除图像”button后， <input type="file" />保持不变，因此发送表单仍然会上传图像。 您需要实际清除该字段，如下所述： 使用jQuery清除<input type ='file'/>

至于技术上无关的第二个问题：

我似乎无法弄清楚如何实际删除图片一旦上传。

为了在上传后删除图像，大概是在“编辑事件”模式下，你必须发送表单图像应该被删除的表单数据，然后在服务器上删除它。

Answer 2

根据Chris G的回答，这就是我所做的，它的工作原理：

  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'); $('#image').wrap('<form>').closest('form').get(0).reset(); $('#image').unwrap(); } removeError($('#imageError'), $('#image')); });