首页新闻找找看学习计划

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 提交数据不要提交删除的数据。

少年志的主页 少年志 | 菜鸟二级 | 园豆:202
提问于:2018-06-04 14:37
< >
分享
最佳答案
0

点击上传的时候再去获取files对象, 或者删除的时候把files对应索引的file移除
贴你的代码, 想要示例代码网上很多...

奖励园豆:5
、熙和 | 小虾三级 |园豆:1486 | 2018-06-04 14:49

<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 提交数据不要提交删除的数据。

少年志 | 园豆:202 (菜鸟二级) | 2018-06-04 14:57

@少年志: multiple是不能删除已经选定的文件
可以上传的时候 用一个全局变量把file存进去,删除的时候把变量里面对应索引的file删掉
表单里面input type='file' 把name属性去掉
form提交之前把这个全局变量file放到form里面这样就好

要不你就用js把删除图片的索引记录一下传回后台,后台去处理

、熙和 | 园豆:1486 (小虾三级) | 2018-06-04 15:45

@、熙和: 明白了,就是js没有办法修改input,只能修改自身的变量。

少年志 | 园豆:202 (菜鸟二级) | 2018-06-04 17:44
其他回答(1)
0

大佬,麻烦问一下,表单里面input type='file' 把name属性去掉之后,form提交时怎么加入全局变量file啊......
现在页面效果是已经删除,全局变量也没问题了。怎样将这个变量传到后台的文件对象fileImage中,求大神赐教啊

茫无所知 | 园豆:202 (菜鸟二级) | 2019-08-15 17:20

可以用个隐藏域,js把多图数组放进去,跟着form一块提交上去。

支持(0) 反对(0) 少年志 | 园豆:202 (菜鸟二级) | 2019-08-17 14:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册