已解决,未刷新页面时,上传会重复触发二次或多次uploaded事件
请在初始化时,off()一次,清除此上传选择器的历史绑定事件on()
已解决,二次打开时,历史缓存文件列表
请在初始化前,清除或销毁历史inputfile
fileinput('destroy') 或 fileinput('clear')
范例:
<input type="hidden" class="form-control input-md" id="pics" value="1,2" />
<input id="upfile_Btn" multiple="multiple" type="file">
js代码
let oldfileids=$("#pics").val(); //文件数据库编号1,2,3...
let urlAry=new Array();
let conAry=new Array();
if(oldfileids.length>0){
let fileAry=oldfileids.split(',');
for(let i=0;i<fileAry.length;i++){
urlAry.push('../../getfile.php?id='+fileAry[i]);
let curPreviewConfig={
caption: '文件ID'+fileAry[i],// 展示的图片名称
size: 0,
width: '100%',// 图片高度
url: 'app/movie_file_del.php',// 预展示图片的删除调取路径
key: fileAry[i],// 可修改 场景2中会用的
extra: {id: fileAry[i],position:'cover'} //调用删除路径所传参数
}
conAry.push(curPreviewConfig);
}
}
$("#upfile_Btn").off().fileinput('clear').fileinput('destroy').fileinput({
uploadUrl: "/upload.php?dir=image&files=upfile_Btn", // 服务器端上传处理程序
language:'zh', //设置语言
uploadExtraData: function(previewId, index) {
//额外参数的关键点,没有额外参数可以注释掉
data = {
test1:'haha'
}
return data;
},
overwriteInitial: false, //true再次点击覆盖
//下面几个就是初始化预览图片的配置
initialPreviewAsData: true,
initialPreviewFileType: 'image',
//-----------------------------------------------------------------
//就是这里,拼接字符串后,放到这里无法显示,
//var url= []; 这里要创建数组对象,然后把接口中每条url进行插入数组操作,就会正常显示了
//-----------------------------------------------------------------
initialPreview: urlAry,
initialPreviewConfig: conAry,
initialPreviewShowDelete: true,
removeFromPreviewOnError:true,
previewSettings: {
image: {width: '100px', height: '100px'}
},
allowedFileExtensions: ['jpg','png'],
//allowedPreviewTypes : ['image', 'html', 'text', 'video', 'audio', 'flash'],
uploadAsync: false, //默认true异步上传
showUpload: false, //是否显示上传按钮
showCaption:false,//是否显示标题
showPreview: true, // 显示预览
showRemove: false, // 显示移除按钮
showCancel: false,
dropZoneEnabled: true, // 显示拖拽区域
showClose: false,
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
showUploadedThumbs: false,
autoReplace: false,
purifyHtml: false,
showAjaxErrorDetails:false,
maxFileCount:20,
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
//layoutTemplates:{actionUpload:'',actionZoom:'',actionDownload:'',actionDelete:''},
layoutTemplates:{actionUpload:'',actionZoom:'',actionDownload:''},
browseClass:"btn btn-default btn-xs" //按钮样式
}).on("filebatchuploadsuccess",function(event, data, previewId, index){
console.log('batchupload');
let olddata=$("#pics").val().length>0?$("#pics").val().split(','):new Array();
$("#pics").val(data.response.fileids.concat(olddata).join(','));
$('#' + previewId).attr('fileid', data.response.fileids.join(','));
}).on("fileuploaded", function(event, data, previewId,index) {
//$("#pic").val(id.response.fileids);
//console.log('singeUpload');
})
.on('filepreupload', function(event, data, previewId, index) { //一个上传中处理函数
//var form = data.form, files = data.files, extra = data.extra,
// response = data.response, reader = data.reader;
//console.log('文件正在上传');
}).on("fileimageuploaded", function(event, files)
{
//$(this).fileinput("upload");
})
.on("filebatchselected", function(event, files)
{
$(this).fileinput("upload");
}).on('filedeleted', function (event, key) {
//历史文件删除
console.log('1filedeleted--Key = ' + key);
if($("#s_cover").val().length>0){
let s_cover=$("#s_cover").val().split(',');
s_cover = s_cover.filter(function(item){return item != key});
$("#s_cover").val(s_cover.join(','));
}
}).on('filesuccessremove', function (event, previewId) {
//新上传删除
console.log('filesuccessremove1');
if($("#s_cover").val().length>0){
let pics=$("#s_cover").val().split(',');
let fileid=$('#' + previewId).attr('fileid');
pics = pics.filter(function(item){return item != fileid});
$("#pics").val(pics.join(','));
}
}).on('filesuccessremove', function (event, previewId, extra) {
//新上传删除
console.log('filesuccessremove2');
}).on('fileremoved', function (event, previewId, index) { //删除成功后事件
//id为thumb-planFile-init-0 index=init-0 0为删除的序号
//var paths = $("input[name='" + this.id + "']").val()//获取旧路径值
//$("input[name='" + event.currentTarget.id + "']").val(pathStr);
}).on('filepreremove', function(event, previewId, index) {
//删除重新选择的图片触发,删除原图不触发。
console.log('id = ' + id + ', index = ' + index);
})
/*.on('filepredelete', function(event, key, jqXHR, data) {
if(!confirm("确定删除原文件?删除后不可恢复")){
return false;
}
})*/
;
参考: