Bootstrap fileinput重复上传同一张图片,已上传成功的图片会被删除
第一次上传图片显示:
第二次再重复选择:
代码实现如下:
//上传文件
`$("#words").fileinput({
language: 'zh', //设置语言
minFileCount: 1, //每次上传允许的最少文件数。如果设置为0,则表示文件数是可选的。默认为0
maxFileCount: 9, //每次上传允许的最大文件数。如果设置为0,则表示允许的文件数是无限制的。默认为0
allowedFileExtensions : ['jpg', 'png'],//接收的文件后缀
// dropZoneEnabled: false,
// showUpload: false,
// showCaption: false,
// showRemove: false,
// autoReplace: true,
enctype: 'multipart/form-data',
// overwriteInitial:false,//不覆盖已上传的图片
// previewClass:'preview-file-area',
// browseClass: "add-file-btn", //按钮样式
uploadUrl: '{ms:global.host/}/basic/upload.do', // 服务器端上传处理程序
uploadExtraData: function(previewId, index) { //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'},在PHP中你可以读取这些数据$_POST['id']
var uploadFloderPath ='/upload/works/works';
return {uploadFloderPath: uploadFloderPath,
rename:true};
},
}).on("filebatchselected", function(event, files) {
console.log('选择文件后:::::')
console.log(files)
if(($('.form-control-file').find('.file-preview-frame').length)*0.5 > 9) {
showFormText('#words-error','图片最多为9张');
}else {
// 选择文件后立即触发上传方法
$("#words").fileinput("upload");
}
}).on("fileuploaded", function (event, data, previewId, index) {//fileuploaded
List.push({ FileUrl: data.response[0], KeyID: previewId });
//异步上传成功后唤起的方法
}).on('filebatchuploaderror',function(event, data){//上传失败唤起方法
console.log("文件上传出错!请重试");
}).on('fileclear', function (evt, data,file) {
List=[];
}).on('filesuccessremove', function (event, data, previewId, index) {
for (var i = 0; i < List.length; i++) {
if (List[i].KeyID == data) {
List[i].FileUrl='';
List[i].KeyID='';
}
}
});
// 获取imgurl列表
var imgUrlStr;
for (var i = 0; i < List.length; i++) {
if (List[i].FileUrl != '') {
if(i==0){
imgUrlStr=List[i].FileUrl;
}else {
imgUrlStr=imgUrlStr+','+List[i].FileUrl
}
}
}
$('#imgUrlStr').val(imgUrlStr);
`
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
名字重复了?