html内容
<div class="form-group" id="fangInput">
</div>
<div class="form-group">
<input type="file" name="files" id="fileIds1" values="请选择上传文件" multiple="multiple" >
<button type="button" class="btn btn-default" style="background-color:#337ab7;color:#fff;margin-top:3px" id="btn_upload1" >点击上传</button> </div>
js内容
$("#btn_upload1").click(function () {
var fileObj1 = document.getElementById("fileIds1").files
console.log(fileObj1);
if(JSON.stringify(fileObj1)==='{}'){
alert("请选择上传文件")
}else{
var i = 0;
var jj = 0;
var formFile = new FormData();
for (i; i < fileObj1.length; i++) {
var fileObj = document.getElementById("fileIds1").files[i];
formFile.append("files", fileObj);
}//加入文件对象
var data = formFile;
$.ajax({
url: '${ctxPath}/data/readFile?id='+fileupload,
data: data,
type: "Post",
dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
success: function (data) {
if("ok" == data.msg){
alert("上传文件成功!");
fileIds=fileIds+data.id;
console.log(fileIds);
}else{
alert("上传文件失败!");
$("#fileIds").val("");
fileIds="";
}
}
})
}
})
$("#fileIds1").change(function() {
console.log(1);
var fileObj1 = document.getElementById("fileIds1").files; // js 获取文件对象
console.log(fileObj1);
for (var i = 0; i < fileObj1.length; i++) {
$("#fangInput").append('<p for="message-text" class="control-label" style="width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden">文件名:' +
fileObj1[i].name +
' <button type="button" onclick="fangDelete(this)" class="btn btn-default del-btn" style="background-color:#dc4739;color:#fff;margin-top:3px">删除文件</button></p >');
}
console.log(fileObj1);
})
function fangDelete(t) {
var fileObj1 = document.getElementById("fileIds1").files;
console.log(fileObj1);
delete fileObj1[t];
console.log(fileObj1);
console.log($(t).closest("p"));
$(t).closest("p").remove();
}
input file在前端进行了多选,删除操作,但实际上我只是删除了表面视图上的p元素,实际input(file)里的值我并没有改变,上传到后端的还是那些文件。想请问大神如何在我的点击事件里再删除p元素的同时,用删除当前选中input file的值,实现真正意义上的文件的多选,删除