Bootstrap 3.4.1 fileinput 多文件上传、回显、删除前端实现

普通单图片上传

html

文件上传的时候

标签中必须要写enctype="multipart/form-data"

<form id="perForm" method="POST" class="add_form" enctype="multipart/form-data">
    <input type="text" id="name" name="name" vname="名称" maxlength="20">
<input class="upload_img_input" type="file" name="file" id="file" required="required" /> <img src="" class="show_choose_img" id="show_choose_img" />
    <input type="button" value="保存" onclick="save()">
form>

javaScript

• 使用FormData对象，
• 注意：cache : false,processData : false,contentType : false,三个属性

function save() {
		var formData = new FormData($('#perForm')[0]);
		$.ajax({
			url : '点击保存按钮触发的url',
			type : 'post',
			dataType : "json",
			cache : false,//上传文件不需要缓存
			data : formData,
			processData : false,//data值是FormData对象，不需要对数据进行处理
			contentType : false,//contentType值，因为是由表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
			success : function(result) {
				if (result.status == 1) {
					alert('上传成功');
				} else {

				}
			}
		});
	} 
	//这里是为了显示图片用的
	 $(".upload_img_input").change(function() {
		var files = this.files;
		for (var i = 0; i < files.length; i++) {
			var objUrl = getObjectURL(files[i]);
			$('.show_choose_img').attr("src", objUrl);
			$('.show_choose_img').css({
				// opacity:指定一个元素的透明度，0-完全透明，1-完全不透明
				opacity : 0
			});
			$('.show_choose_img').show(0).animate({
				opacity : 1
			}, 1000);
		}
		
	}); 
	//  获取图片的url。是临时文件
	 function getObjectURL(file) {
		var url = null;
		if (window.createObjectURL != undefined) { // basic
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	}  

Bootstrap fileinput 多文件

上传和编辑的html部分一样，区别在于js部分，再就是根据自己的需求对插件进行初始化

html

• 引入bootstrap.min.css,bootstrap-fileinput.min.css
• 引入jquery-3.3.1.min.js，bootstrap.min.js，bootstrap-fileinput.min.js
• 文件上传的时候标签中必须要写enctype="multipart/form-data"
• 文件上传时标签中type="file"，多文件上传时，需要添加multiple属性

<form id="perForm" method="POST" class="add_form" enctype="multipart/form-data">
    <input type="text" id="name" name="name" vname="名称" maxlength="20">
	<input  type="file" name="file" id="upload_img_input" multiple />
    <input type="button" value="保存" onclick="save()">
form>

效果图

上传时的JavaScript

想要实现的是：在点击“保存”按钮的时候，将表单中的文件还有其他的数据信息都保存起来。

• 实现思路是：点击保存按钮的时候，先将除文件以外的信息保存，成功之后触发文件上传（$('#upload_img_input').fileinput('upload');）。

• 注意：
  文件初始化时的uploadAsync : false/true,属性不同，对应的后台代码也是不同的，取值为false的时候，后台使用MultipartFile[]数组接收，取值为true时，使用MultipartFile来接收；

  var commId;
  	//点击保存按钮
  	function save() {
  		if ($('#upload_img_input').fileinput("getFilesCount") <= 0) {//获取文件个数
  			alert("请至少上传一张图片")
  			return;
  		}
  		var formData = new FormData($('#perForm')[0]);
  		$
  				.ajax({
  					url : '',
  					type : 'post',
  					dataType : "json",
  					cache : false,//上传文件不需要缓存
  					data : formData,
  					processData : false,//data是FormData对象，不需要对数据进行处理
  					contentType : false,
  					beforeSend: function () {
  						if(!$('#perForm').check()){
  							return false;
  						}
  					},
  					success : function(result) {
  						if (result.status == 1) {
  							var id = result.data.id;
  							commId = id;
  							$('#upload_img_input').fileinput('upload');//出发开始上传文件
  							
  						} else {
  
  						}
  					}
  				});
  	}
  
  	// 初始化
  	$(document)
  			.ready(
  					function() {
  						$('#upload_img_input')
  								.fileinput(
  										{
  											language : 'zh',//
  											uploadUrl : '图片上传的url',
  											dropZoneEnabled : false,
  											showUpload : false,//
  											showZoom : false,
  											showCaption : false,//
  											uploadAsync : false,//默认是true，异步上传，这里改成同步上传
  											maxFileCount : 5, //同时上传文件的最大个数
  											maxFileSize : 1024 * 10, //对文件大小做限制
  											allowedFileExtensions : [ "jpg",
  													"jpeg", "gif", "png", "bmp" ],//允许上传的文件格式
  											fileActionSettings : {
  												showUpload : false
  											},
  											mainClass : "input-group-lg",
  											uploadExtraData : function(previewId, index) {
  												return {
  													'id' : commId
  												};
  											}//上传时携带的额外的参数
  										})
  								.on(
  										"filebatchuploadsuccess",
  										function(event, data) {
  											if (data.response.status == 1) {
  												alert('上传成功');
  											}
  										});
  					});
  

编辑时的JavaScript

• 编辑的时候涉及到了已上传图片的回显、删除，更新操作，；
• 此部分主要涉及overwriteInitial,initialPreviewShowDelete, initialPreview:previewJson, initialPreviewConfig:initPreviewConfig,这几个属性；
• 删除操作在组装initialPreviewConfig的时候体现。

  //此部分主要是组装previewJson,initPreviewConfig
  $(function() {
  		//获取product对象
      //这里的写法是因为使用了Thymeleaf，此时需要这样定义：
  		var product = [[${product}]]; 
  		//获取productImg
  		var pics;
  		if (product != null) {
  			pics = [[${product.productImgs}]];
  			if (pics != null ) {
  				//图片
  				var previewJson = new Array() ;
  				//图片配置
  				var initPreviewConfig = new Array();
  				for(var i = 0; i < pics.length; i++){
  					var pic = pics[i];
  					src = pic.imgPath;
  					previewJson[i] = '+src+'" class="file-preview-image" style="width: 100px; height: 160px;">';	
  					//组装图片配置
  	                var id = pic.id;
  	                var tjson = {
  	                	caption: (i+1)+'.png', // 展示的文件名
  	                    width: '120px',
  	                    url: '', // 删除url
  	                    key: id, // 删除时Ajax向后台传递的参数
  	                   /*  extra: function() {
  	                        return {"id":id};
  	                    } */ //这里也可以携带格外的参数
  	                };
  	                initPreviewConfig[i] = tjson;
  	               
  				}
  				//以上组装好了图片previewJson和图片配置initPreviewConfig
  				//传递参数，并开始初始化
  				
  				initFileInput("update_img_input",previewJson,initPreviewConfig);
  			}else{
  				initFileInput("update_img_input",'','');
  			}
  		}else{
  			initFileInput("update_img_input",'','');
  		}	
  	});
  
  //点击更新按钮时
  	function save1() {
  		var formData = new FormData($('#perForm')[0]);
  		$.ajax({
  			url : 'url',
  			type : 'post',
  			dataType : "json",
  			cache : false,//上传文件不需要缓存
  			data : formData,
  			processData : false,//data是FormData对象，不需要对数据进行处理
  			contentType : false,
  			beforeSend: function () {
  				if(!$('#perForm').check()){
  					return false;
  				}
  			},
  			success : function(result) {
  				if (result.status == 1) {
  					$('#update_img_input').fileinput('upload');//触发开始上传文件
  					
  				} 
  				else {
  				}
  			}
  		});
  	}
  //文件初始化
  	function initFileInput(ctrlName,previewJson,initPreviewConfig) {
  		var control = $('#'+ctrlName);
  		control.fileinput({
  			language : 'zh',// 设置语言
  			//图片上传的url
  			uploadUrl : rootPath + '/product/uploadImg.do',
  			dropZoneEnabled : false, //不支持拖拽
  			showUpload : false,//是否显示上传按钮
  			showZoom : false,//
  			showCaption : false,//是否显示标题
  			//showPreview: false,//是否显示预览
  			uploadAsync : false,//同步上传
  			//removeFromPreviewOnError:true,//
  			maxFileCount : 5, // 允许同时上传的最大文件个数
  			maxFileSize : 1024 * 10, //
  			allowedFileExtensions : [ "jpg","jpeg", "gif", "png", "bmp" ],
  			fileActionSettings : {
  				showUpload : false
  			},
  			layoutTemplates :{
                  // actionDelete:'', //去除上传预览的缩略图中的删除图标
                  actionUpload:'',//去除上传预览缩略图中的上传图片；
                  actionZoom:'',   //去除上传预览缩略图详情的图标
                  actionDownload:'' //去除上传预览缩略图中的下载图标
              },
              //回显的重点
              overwriteInitial:false,//不覆盖之前的文件
  			initialPreviewShowDelete:true,	//是否显示初始化数据的删除按钮
  			initialPreview:previewJson,		//初始化图片
              initialPreviewConfig:initPreviewConfig,	//初始化图片配置
              
  			mainClass : "input-group-lg",
  			uploadExtraData : function(previewId, index) {
  				return {
  					//向后台传递productId
  					'id' : $('#productId').val()
  				};
  			}
  		})
  .on(
  		"filebatchuploadsuccess",
  		function(event, data) {
  
  			if (data.response.status == 1) {
  				alert('上传成功');
  				$('#add_product').toClose()
  				$("#per_table")
  						.bootstrapTable(
  								'refresh',
  								{
  									url : rootPath
  											+ '/product/productUnreviewedAndRejectList.do'
  								});
  			}
  		}).on('filepredelete',function(event,key,jqXHR,data){
  			initFileInput("input-id",previewJson,initPreviewConfig);
  		});
  		/* }); */
  		} 
  

  ---

记录一下自己借助的Bootstrap fileinput插件实现的多文件上传、回显、删除、编辑功能。谢谢网络上一些参考博客及官方网站。
关于效果方面，若写的内容无误的话，去查看一下js css等的引用顺序，再就是找博客或官方文档一定要找和你版本一样的，否则可能是在浪费时间。