如何删除Javascript中上传的图片？

Question

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

我创建了一个表单，允许用户输入活动详细信息，并上传与活动相关的图片。

看起来像这样：

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

我的问题如下：

用户填写表格并上传图片
用户决定不想要与事件关联的图像
用户点击删除图片（图片似乎已被删除 -- 即图片预览为灰色并显示 "drop image here or click to upload"）
1. 用户提交事件。
2. 用户观看事件。 "deleted" 图像在那里。换句话说，图像从未被删除。

我似乎不知道如何在图片上传后删除它。

这是我的 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，以及一个保管箱 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);
}

基本上，在前端，当用户上传图片时，会创建一个图片标签并将其插入到预览中。 class 'hidden' 已从预览中删除，class 'hidden' 已添加到保管箱。因此图像出现。

单击删除图像时，将从预览中删除，隐藏预览，并且 class 'hidden' 从 dropbox 中删除。即，图像似乎已被删除。

但是，提交表单后，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"
    }  
    ....
    ....
}

有人有什么建议吗？我想真正了解当我说 reader.readDataAsURL 时发生了什么（我认为这是什么保存文件？？？）我已经阅读了一些 Whosebug posts，但不能非常理解建议的解决方案或解释...

Answer 1

选择图片只会在浏览器中显示，不会实际上传。只有在提交表单之后才会发生这种情况。并且根据您的代码，在用户单击 "Remove image" 按钮后， <input type="file" /> 保持不变，因此发送表单仍会上传图片。您需要按照此处所述实际清除该字段：Clearing <input type='file' /> using jQuery

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

I can't seem to figure out how to actually delete the image once its uploaded.

为了删除图像在上传后，大概是在"edit event"模式下，您必须发送表格数据表明图像应该是删除，然后在服务器上删除。

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'));
});

如何删除Javascript中上传的图片？

How to delete uploaded image in Javascript?

javascript

image-uploading

ejs

image-upload

node.js