炫意html5
最早CSS3和HTML5移动技术网站之一

Bootstrap FileInput实现图片上传功能

这篇文章主要为大家详细介绍了Bootstrap FileInput实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap FileInput实现图片上传功能的具体代码,供大家参考,具体内容如下

html代码:

<div>
<label>图片</label>
<div>
<input type="file" multiple data-browse-on-zone-click="true" accept="image/*" />
<input name="resources" th:value="${record.picUrls}" type="hidden">//获取上传的图片路径,$("#filesInput").val()获取不到,用隐藏的input来获取
</div>
</div>

引入js和css文件

<link href="https://www.jb51.net/ajax/libs/bootstrap-fileinput/fileinput.css" rel="stylesheet" type="text/css"/>
<script th:src="https://www.jb51.net/article/@{/js/jquery.min.js}"></script>
<script th:src="https://www.jb51.net/article/@{/js/bootstrap.min.js}"></script>
<script th:src="https://www.jb51.net/article/@{/ajax/libs/bootstrap-fileinput/fileinput.js}"></script>

js代码:

var List = new Array();//定义一个全局变量去接受文件名和id
$(function () {
var picStr = [
http:...,
http:....
];
var picStrConfig = [
{caption: "11111", width: "120px", fileid:"123456", url: "deleteData", type:"image", key: "1"},
........
];
$('#filesInput').fileinput({
theme: 'fas',
language: 'zh',
uploadUrl: ctx + 'bike/record/uploadData',
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
overwriteInitial: false,
showRemove : false, //显示移除按钮
// showPreview : true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
maxFileCount: 5, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
layoutTemplates: {actionUpload: ''},
maxFilesNum: 5,
fileType: "any",
allowedPreviewTypes: ['image'],
previewFileIcon: "<i></i>",
initialPreviewAsData: true,
initialPreview: picStr, //初始化回显图片路径
initialPreviewConfig: picStrConfig //配置预览中的一些参数
}).on("fileuploaded", function (event, data, previewId, index) {
var response = data.response;
var filePath = data.response.filePath; //文件上传成功返回的文件名,可返回自定义文件名
List.push({ FileName: filePath, KeyID: previewId })
// alert(response.filePath);
// $("#fileMd5").val(response.fileMd5);
// $("#version").val(response.newVersionName);
var resources = $('#resources').val();
if (!resources){
$("#resources").val(response.filePath);
}else{
$("#resources").val(resources+"^_^"+response.filePath);
}
}).on('filepredelete', function(event, data, previewId, index) { //删除原图片之前的触发动作
}).on('filedeleted',function (event, data, previewId, index) {//删除原图片之后的动作
var resources = $("#resources").val();
var respone = previewId.responseJSON;
if(respone.code == 0){
var deleteName = "/"+data;
if(resources.indexOf("^_^"+deleteName)>-1){
$("#resources").val("^_^"+resources.replace(deleteName,""));
resources = $("#resources").val();
}
if(resources.indexOf(deleteName+"^_^")>-1){
$("#resources").val(resources.replace(deleteName+"^_^",""));
resources = $("#resources").val();
}
if(resources.indexOf(deleteName)>-1){
$("#resources").val(resources.replace(deleteName,""));
resources = $("#resources").val();
}
}
}).on('filepreupload', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
}).on("filesuccessremove", function (event, data, previewId, index) {
var resources = $("#resources").val();
for (var i = 0; i < List.length; i++) {
if (List[i].KeyID == data) {
if(resources.indexOf("^_^"+List[i].FileName)>-1){
$("#resources").val("^_^"+resources.replace(List[i].FileName,""));
resources = $("#resources").val();
}
if(resources.indexOf(List[i].FileName+"^_^")>-1){
$("#resources").val(resources.replace(List[i].FileName+"^_^",""));
resources = $("#resources").val();
}
if(resources.indexOf(List[i].FileName)>-1){
$("#resources").val(resources.replace(List[i].FileName,""));
resources = $("#resources").val();
}
List[i].KeyID = "1"
}
}
});
})

java代码:

/**
* 上传文件
*/
@RequestMapping("/uploadData")
@ResponseBody
public Map<String, Object> uploadData(HttpServletRequest request, HttpServletResponse response) throws Exception{
request.setCharacterEncoding("UTF-8");
Map<String, Object> json = new HashMap<String, Object>();
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
/** 页面控件的文件流* */
MultipartFile multipartFile = null;
Map map =multipartRequest.getFileMap();
for (Iterator i = map.keySet().iterator(); i.hasNext();) {
Object obj = i.next();
multipartFile=(MultipartFile) map.get(obj);
}
/** 获取文件的后缀* */
String filename = multipartFile.getOriginalFilename();
InputStream inputStream;
String path = "";
String fileMd5 = "";
try {
/** 文件上传到存储库中 **/
inputStream = multipartFile.getInputStream();
File tmpFile = File.createTempFile(filename,
filename.substring(filename.lastIndexOf(".")));
fileMd5 = Files.hash(tmpFile, Hashing.md5()).toString();
FileUtils.copyInputStreamToFile(inputStream, tmpFile);
/** 上传到 MinIO上 **/
path = minioFileUtil.uploadCustomize(multipartFile.getInputStream(), filename.substring(filename.lastIndexOf(".")), "",multipartFile.getContentType());
/** 上传 到 阿里云oss **/
//   path = AliOSSUtils.getInstance().multpartFileUpload(multipartFile,"bike");
tmpFile.delete();
} catch (Exception e) {
e.printStackTrace();
logger.error("上传失败",e);
json.put("fileMd5", fileMd5);
json.put("message", "上传失败");
json.put("status", false);
json.put("filePath", path);
return json;
}
json.put("fileMd5", fileMd5);
json.put("message", "上传成功");
json.put("status", true);
json.put("filePath", path);
json.put("key", UUIDGenerator.getUUID());
return json;
}
/**
* 删除文件文件
*/
@RequestMapping("/edit/deleteData/{id}")
@ResponseBody
@Transactional(rollbackFor = Exception.class)
public AjaxResult deleteData(@PathVariable("id")String id, HttpServletRequest request) throws Exception{
String key = request.getParameter("key");
Record record = recordService.getById(id);
String picUrls = record.getPicUrls();
String deleteName = "/" + key;
if (picUrls.indexOf("^_^" + deleteName) > -1) {
picUrls = "^_^" + picUrls.replace(deleteName, "");
}
if (picUrls.indexOf(deleteName + "^_^") > -1) {
picUrls = picUrls.replace(deleteName + "^_^", "");
}
if (picUrls.indexOf(deleteName) > -1) {
picUrls = picUrls.replace(deleteName, "");
}
record.setPicUrls(picUrls);
if (recordMapper.updatePicsById(record) == 1) { /** 先删除数据库中的图片路径 再删除图片存储的源文件。**/
minioUtil.removeObject(bucketName, key);
return success(key);
}
return error();
}

修改 fileInput 源码:

self._handler($el, 'click', function () {
if (!self._validateMinCount()) {
return false;
}
self.ajaxAborted = false;
self._raise('filebeforedelete', [vKey, extraData]);
//noinspection JSUnresolvedVariable,JSHint
$.modal.confirm("确定删除原文件?删除后不可恢复",function () { //初始化回显的图片在删除时弹出提示框确认。
if (self.ajaxAborted instanceof Promise) {
self.ajaxAborted.then(function (result) {
if (!result) {
$.ajax(settings);
}
});
} else {
if (!self.ajaxAborted) {
$.ajax(settings);
}
}
})
});
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持炫H5(xyhtml5.com)。

炫意HTML5 » Bootstrap FileInput实现图片上传功能

CSS3教程HTML5教程