bootstrap-inputfile正确使用方法

已解决，未刷新页面时，上传会重复触发二次或多次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;
		}
	})*/
	;

参考：