js如何删除input节点内的files对象内指定文件？
0
[已解决问题]
解决于 2018-06-04 17:44
html：
利用input多图上传，选中多个图片后确认。
jquery：
在利用jquery获取input节点内的files对象的数据，比如获取到的files对象内有5张图片文件，
这个时候可做好多事情，比如图片预览等....
然而我发现第二张图片效果不好我不想上传了，然后我就进行了删除，然而我删除以后服务器还是收到了这张图片的数据，并进行的上传；
那么说明，我删除操作只是把预览图片的dom节点删除了，并没有将input节点内的files对象内的第二张图片文件删除。
问：？
那么我该如何删除？
jquery 或者 javascript 请给出示例代码！
问题补充：
首先声明一点，form 提交数据，javascript只是实现预览加删除的功能，提交不是javascript实现的。
form 提交数据不要提交删除的数据。
最佳答案
0
点击上传的时候再去获取files对象, 或者删除的时候把files对应索引的file移除
贴你的代码, 想要示例代码网上很多...
奖励园豆：5
<input id="customer-edit-goods-fileUpload" type="file" style="width:65px;" accept="image/png,image/gif,image/jpeg"
name="file_data[]" multiple="multiple" onchange="uploadFiles($('#customer-edit-goods-fileUpload'));"/>
<fieldset>
<legend>预览区域</legend>
<div style="position: relative;" id="ccc"></div>
</fieldset>
/* 图片上传 */
function uploadFiles(evt) {
var $this = evt;
var file = $this[0].files;
var file_length = file.length;
for (var i = 0; i < file_length; i++) {
var pattern_chin = /image\/\w+/;
var file_type = file[i].type;
var matchResult = file_type.match(pattern_chin);
// 验证图片非空
if (!matchResult) {
message("请选择图片文件");
return false;
}
// 验证图片大小
if (file[i].size > (3096 * 1024)) {
message("第 " + i + " 张图片不能大于3MB");
return false;
}
var image_url = URL.createObjectURL(file[i]);
var uploadScroll = '<div style="position:relative;width:inherit;height:inherit;float:left;z-index:2;width:150px;margin-left:8px;margin-right:8px;" class="imageDiv">' +
'<img name="loadimgs" src="'+ image_url +'" width="150"></div>';
$('#ccc').append(uploadScroll);
}
}
首先声明一点，form 提交数据，javascript只是实现预览加删除的功能，提交不是javascript实现的。
form 提交数据不要提交删除的数据。
@少年志: multiple是不能删除已经选定的文件
可以上传的时候 用一个全局变量把file存进去,删除的时候把变量里面对应索引的file删掉
表单里面input type='file' 把name属性去掉
form提交之前把这个全局变量file放到form里面这样就好
要不你就用js把删除图片的索引记录一下传回后台,后台去处理
@、熙和: 明白了，就是js没有办法修改input，只能修改自身的变量。
其他回答(1)
0
大佬，麻烦问一下，表单里面input type='file' 把name属性去掉之后，form提交时怎么加入全局变量file啊......
现在页面效果是已经删除，全局变量也没问题了。怎样将这个变量传到后台的文件对象fileImage中,求大神赐教啊
可以用个隐藏域，js把多图数组放进去，跟着form一块提交上去。
