普通单图片上传
html
文件上传的时候<form>标签中必须要写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值，因为是由<form>表单构造的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 - 文件上传的时候
<form>标签中必须要写enctype="multipart/form-data" - 文件上传时
<input>标签中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，此时需要这样定义：<script type="text/javascript" th:inline="javascript"></script> 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] = '<img src="'+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等的引用顺序，再就是找博客或官方文档一定要找和你版本一样的，否则可能是在浪费时间。
4316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
