Bootstrap上传文件插件fileinput单文件上传、预览以及maxFileCount不生效问题

Bootstrap单文件上传、预览以及maxFileCount不生效问题

本部分主要记录自己在开发过程中遇到的上传单文件的问题。下面开始叙述如何使用Bootstrap的fileinput上传插件。

一、引入Bootstrap上传插件所需的css、js

<link href="../css/fileinput.css" rel="stylesheet"></link>
<script src="../js/fileinput.js" type="text/javascript"></script>

二、Html中input的绑定

<input id="imgFile" name="file" type="file" class="file">
<input id="imgFileVal" name="imgFileVal" type="hidden"/>

三、js显示上传按钮

这里需要注意jquery的引入 fileinput配置项地址

$("#imgFile").fileinput({
    language: 'zh', //设置语言
    uploadUrl: "/common/uploadFile", //上传的地址
    allowedFileExtensions: ['jpg','png'],//接收的文件后缀
    uploadAsync: false, //默认异步上传,这里设置了同步
    showUpload: false, //是否显示上传按钮
    showRemove : true, //显示移除按钮
    showPreview : true, //是否显示预览
    showCaption: false,//是否显示标题
    browseClass: "btn btn-primary", //按钮样式     
    dropZoneEnabled: false,//是否显示拖拽区域
    maxFileCount: 1, //表示允许同时上传的最大文件个数
	autoReplace:true,//是否可替换
    enctype: 'multipart/form-data',
    validateInitialCount:true
	});

四、获取文件提交表单

if ($('#imgFile')[0].files[0]!= null) {
    /*
    FormData对象使用的场景：
    1、把form中所有表单元素的name和value组装成一个queryString
    2、异步上传二进制文件
    */
	var formData = new FormData();//通过FormData将文件转换成二进制数据
	/*
	获取的文件为每次点击上传后的文件，初始化上传组件时要设置autoReplace:true
	避免上传第二张图片时提示上传的文件数2大于最大上传数1，但是文件中图片预览框     展示的是第一张图片，但是上传的文件是提交前最后一次点击上传时上传的文件问题。
	*/
	formData.append('file', $('#imgFile')[0].files[0]);
	$.ajax({
		    url: "/common/uploadFile",
	        type: 'post',
	        cache: false,
	        data: formData1,
	        processData: false,
	        contentType: false,
	        async: false,
	        dataType: "json",
	        success: function(result) {
        	if (result.code==0){
				$('#imgFileVal').val(result.url);
			}else {
				alert(data.response.msg);
			}
               }
	    });
	    }

五、修改时的图片预览

var image=[];
if($('#imgFileVal').val()){
    image=['<img src="'+$('#imgFileVal').val()+'" class="kv-preview-datafile-preview-image">'];
		} 
$("#imgFile").fileinput({
    language: 'zh', //设置语言
    uploadUrl: "/common/uploadFile", //上传的地址
    allowedFileExtensions: ['jpg','png'],//接收的文件后缀
    uploadAsync: false, //默认异步上传,这里设置了同步
    showUpload: false, //是否显示上传按钮
    showRemove : true, //显示移除按钮
    showPreview : true, //是否显示预览
    showCaption: false,//是否显示标题
    browseClass: "btn btn-primary", //按钮样式     
    dropZoneEnabled: false,//是否显示拖拽区域
    maxFileCount: 1, //表示允许同时上传的最大文件个数
	autoReplace:true,//是否可替换
    enctype: 'multipart/form-data',
    validateInitialCount:true,
    initialPreview:image
	});

六、 maxFileCount、允许同时上传的最大文件个数不生效问题

/*
下面上传文件的方式，maxFileCount不生效，每次选择上传的文件后，会立马执行上传
操作，上传成功后上传的图片仍然显示在拖拽框内，再次选择文件后仍然能继续上传文件，上传的文件数也是一个，故拖拽框内显示两张图片，由于不是同时上传所以不会提示
上传的文件数超过了maxFileCount设置的数量，面对这种情况有两种解决方案：
(1)使用上述提交表单时先上传文件的方式进行文件的上传
(2)初始化fileinput时展示上传按钮，点击上传按钮时文件再执行上传操作
*/
$("#imgFile").fileinput({
    language: 'zh', //设置语言
    uploadUrl: "/common/uploadFile", //上传的地址
    allowedFileExtensions: ['jpg','png'],//接收的文件后缀
    uploadAsync: false, //默认异步上传,这里设置了同步
    showUpload: false, //是否显示上传按钮
    showRemove : true, //显示移除按钮
    showPreview : true, //是否显示预览
    showCaption: false,//是否显示标题
    browseClass: "btn btn-primary", //按钮样式     
    dropZoneEnabled: false,//是否显示拖拽区域
    maxFileCount: 1, //表示允许同时上传的最大文件个数
	autoReplace:true,//是否可替换
    enctype: 'multipart/form-data',
    validateInitialCount:true,
    initialPreview:image
	}).on("filebatchselected", function(event, files) {
			$("#imgFile").fileinput("upload");
	}).on("filebatchuploadsuccess", 
	  function (event, data, previewId, index) {   
	  //当点击上传后，进行的操作。
	 //通过 data.response.Json对象属性 获得返回数据
		if (data.response.code==0){
			$('#imgFileVal').val(data.response.url);
		}else {
			alert(data.response.message);
		}
	});