在项目里碰到多张图片上传的问题,想使用BootStrap的 FileInput插件,图片可以成功上传,但是不知道如何将多张图片的url保存到数据库中,
数据库使用的是access
你好,
在fileuploaded 方法中,得到上传成功的url。然后使用Ajax 传参数传到后台,后台将这个url 保存起来。前面ajax传参部分,你可以参考以下内容。至于后台数据库保存部分,如果不会,可以去网上看一下如果插入数据库的。
$(function () {
initFileInput("input-id");
})
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: "/fileStore/open/upload/file", //上传的地址
allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'doc', 'docx', 'zip', 'txt', 'mp3'],//接收的文件后缀
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove: true, //显示移除按钮
showPreview: false, //是否显示预览
showCaption: true,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: true,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
maxFileSize: 100000,//单位为kb,如果为0表示不限制文件大小,最大100MB
minFileCount: 1,
maxFileCount: 1, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: false,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
previewFileIconSettings: {
'jpg': '<i class="fa fa-file-excel-o text-success"></i>',
'png': '<i class="fa fa-file-excel-o text-success"></i>',
'pdf': '<i class="fa fa-file-excel-o text-success"></i>',
'gif': '<i class="fa fa-file-excel-o text-success"></i>',
'mp3': '<i class="fa fa-file-excel-o text-success"></i>'
},
msgFilesTooMany: "选择上传的文件数量超过允许的最大数值6!",
ajaxSettings: {
beforeSend: function (request) {
console.log("--clientId--authorization---");
// console.log(clientId);
// console.log(authorization); //设置请求头
request.setRequestHeader("ClientId", clientId);
request.setRequestHeader("Authorization", authorization);
}
},
uploadExtraData: function () {//传递参数
return {
"parma1": false,
"parma2": 20000
};
}
}).on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功
console.log(data);
console.log('文件上传成功!' + JSON.stringify(data));
//保存上传的返回的url
if (data.response.code == 0) {
var url = data.response.result;
alert(data.files[index].name + "上传成功!");
//保存上传的返回的url
$.ajax({
type: "POST",
url: '/open/file/saveCusVisitFile',
contentType: 'application/json;charset=utf-8',
data: JSON.stringify({//设置json
"accountId": b_accountId,
"remark": policyNo,
"fileName": data.files[index].name,
"creator": userName,
"url": url
}),
success: function (res) {
console.log('保存url信息!');
if (res.code === 0) {
alert(data.files[index].name + "上传成功!");
console.log(JSON.stringify(res));
console.log('保存成功!');
} else {
alertErrMsg(res.message);
}
}
});
} else {
alert(data.files[index].name + "上传失败!" + data.response.message);
}
//重置
$("#input-id").fileinput("clear").fileinput("reset").fileinput('refresh').fileinput('enable');
})