参考链接:
https://github.com/kartik-v/bootstrap-fileinput
http://www.cnblogs.com/landeanfen/p/5007400.html
前面大神已经把过程写得很清楚了,但我还是把我实践的过程记录一下。
1、引入Bootstrap fileinput
1.1 引入必要css、js
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/fileinput.min.css" rel="stylesheet"/>
<!--jQuery必须放在第一个!-->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
附:Bootstrap、jQuery、Bootstrap fileinput 下载地址。
1.2 html/js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap fileinput</title>
</head>
<body>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/fileinput.min.css" rel="stylesheet"/>
<!--jQuery必须放在第一个!-->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<input id="file-1" name="files" type="file" multiple="multiple" class="file" >
<script>
// $("#file-1").fileinput("upload");
// with plugin options
$("#file-1").fileinput({
enctype: 'multipart/form-data',
theme: 'fa',
uploadUrl: '/upload/uploadPic', // you must set a valid URL here else you will get an error
// allowedFileExtensions: ['jpg', 'png', 'gif','video','flash'],
overwriteInitial: false,
maxFileSize: 0,
// maxFilesNum: 10,
// allowedFileTypes:['jpg', 'png', 'gif','video','flash'],
// previewFileType:['video', 'flash'],
showUpload:true, //显示上传按钮
showCancel:true,
uploadAsync:false, //设置为异步
showPreview: true,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
</body>
</html>
界面效果:
2 向fastdfs上传文件
2.1 引入fastdfs client依赖
<!--fastdfs client-->
<dependency>
<groupId>net.oschina.zcx7878</groupId>
<artifactId>fastdfs-client-java</artifactId>
<version>1.27.0.0</version>
</dependency>
2.2 编写后端接口
@PostMapping("/uploadPic")
@ResponseBody
public R uploadPic(HttpServletRequest request, HttpServletResponse response,@RequestParam("files") MultipartFile[] files) throws Exception {
ClientGlobal.init("fdfs_client.conf");
//创建一个tracker客户端对象
TrackerClient trackerClient = new TrackerClient();
//使用trackerclient连接trackersever对象
TrackerServer trackerServer = trackerClient.getConnection();
//创建一个straged server对象
StorageServer storageServer = null;
//创建一个storage client 对象
StorageClient storageClient = new StorageClient(trackerServer, storageServer);
//利用storageclient对象上传图片
//参数一为文件所在的路径(不要有中文)
//参数二为文件的拓展名
//参数三为文件扩展信息
MultipartFile attach = files[0];
String ext = attach.getOriginalFilename().substring(attach.getOriginalFilename().lastIndexOf(".")+1);
NameValuePair[] meta_list = new NameValuePair[4];
meta_list[0] = new NameValuePair("fileName", attach.getOriginalFilename());
meta_list[1] = new NameValuePair("fileLength", String.valueOf(attach.getSize()));
meta_list[2] = new NameValuePair("fileExt", ext);
meta_list[3] = new NameValuePair("fileAuthor", "");
String[] upload_file = storageClient.upload_file(attach.getBytes(), ext, meta_list);
//upload_file 存储着访问路径
for(String s : upload_file){
System.out.println(s);
}
return R.ok();
}
fdfs_client.conf 的配置(放在classpanth路径下)
tracker_server=192.168.0.1:22122 //配置安装fastdfs-tracker的服务器ip及端口
上传成功:
控制台输出:
可以直接通过浏览器访问上传的图片:
后续再添加上传视频,删除图片、视频等功能~