使用jQuery的多文件上传[先删除文件，然后再次添加] [英] Multiple File Upload with jQuery [removing file then adding it again]

问题描述

我知道之前曾有人问过这个问题，但是多文件上传时遇到了问题.我不想为此使用插件.我想上传多个文件，将其保存到数据库中并将它们存储到一个文件夹中.在上传图像之前，我想以列表样式显示所有图像的名称.我有一个删除按钮，当您选择一个文件时会动态添加该按钮.

I know that this problem had been asked before but I'm having a problem with Multiple File Upload. I don't want to use a plugin for this. I want to upload multiple files, save it to database and store them to a folder. Before uploading the images, I want to display the names of all the images in list-style. I have a remove button that is being added dynamically when you select a file.

$("#imagefile").on("change", function() {
  var filename = v.name;
  var newfilenameshufflen = $("#"+newfilenameshuff).length;
  if(newfilenameshufflen == 0 || newfilenameshufflen == "0") {
    $('.list-group').append("<li class='list-group-item' id='"+newfilenameshuff+"'><span class='span_image_title'>"+filename+"</span><span class='imagefilesize' id='"+imagefilesizeID+"'></span><span class='removeFile btn btn-primary'>Remove</span></li>");
  }
});

正在删除元素.将图像上传到数据库也按预期工作.但是在上载所有文件之前，我想让用户能够在删除相同的图像后添加相同的图像，但这不能按预期工作.您不能添加具有相同文件名的同一图像，除非您在其顶部添加了不同的文件名.

Removing the element is working. Uploading the images to the database is working as expected too. But before uploading all the files, I want to give the user the ability to add the same image after they removed it, but that does not work as expected. you cannot add the same image with the same file name unless you add a different file name on top of it.

$(document).on("click", ".removeFile", function(e) {
    //clone the element and its children and remove the original
    var parentID = $(this).parent().attr('id');
    var parentEl = $("#"+parentID);
    parentEl.remove();
});

我希望能够自动选择相同的文件.如何重置输入文件(如果有的话)，这不会影响所有其他选定的文件?我已经被这个问题困扰了一天.请，我不想为此使用任何插件.谢谢.

I want to be able to select the same file automatically. How do I reset the Input file if there's ever one, that would not affect all the other selected files? I have been stuck with this problem for a day now. Please, I don't want to use any plugins for this. Thanks.

推荐答案

尝试一下:

$(document).on("click", ".removeFile", function(e) {
    //clone the element and its children and remove the original
    var parentID = $(this).parent().attr('id');
    var parentEl = $("#"+parentID);
    parentEl.remove();
    $("#imagefile").val('');
});

您需要将input [type ="file"]值更改为空

You need to change input[type="file"] value to empty

这篇关于使用jQuery的多文件上传[先删除文件，然后再次添加]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！