前端中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的引入

$("#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("fileuploaded", function (event, data, previewId, index) {   
	  //当点击上传后,进行的操作。
	 //通过 data.response.Json对象属性 获得返回数据
		if (data.response.code==0){
			$('#imgFileVal').val(data.response.url);
		}else {
			alert(data.response.message);
		}
	});
TAG: 前端

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.itniuboke.com/article/22296.html