多图上传
网页有原生的控件支持文件上传：input type="file"，h5也支持了多文件上传，即multiple属性，但是移动端兼容性不好，这里演示了主流pc端浏览器的多文件上传。
一：创建容器存放上传控件
<div>
<dl>
<dt>上传图片:</dt>
<dd class="flex" id="imgList">
<div class="img">
<i class="uploadImg"></i>
<span class="tip">请选择jpg/png/gif格式图片上传</span>
</div>
<div class="img">
<i class="uploadImg"></i>
<span class="tip">请选择jpg/png/gif格式图片上传</span>
</div>
<input type="file" name="photoFile" onchange="filePhoto(this.files)" id="photoFile" style="display: none;" multiple />
</dd>
</dl>
</div>
二：引入多图片上传插件ajaxfileupload.js和jQuery
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script src="ajaxfileupload.js"></script>
三：文件上传前端逻辑代码：
/*选择文件回调函数*/
function filePhoto(f){
var obj = $(".uploadImg");
var fileSize = document.getElementById("photoFile").files.length;
if(!fileSize){
alert("请至少选择一张图片！");
return ;
}
/*上传图片发送请求*/
$.ajaxFileUpload(
{
url: 'url',
type: 'post',
secureuri: false, //是否需要安全协议，默认为false
fileElementId: 'photoFile',//文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
if(data.status != 1){
layer.msg(data.msg);
return;
}
//显示上传的图片
for(var i in data.rows){
obj.eq(i).css("background-image","url("+data.rows[i]+")")
}
//显示上传的文件名
for(var i=0;i<f.length;i++){
$(".tip").eq(i).text(f[i].name);
}
cleanFile();
},
error: function (data, status, e){
alert("服务器繁忙，请稍后再试！");
}
}
);
}
/*点击上传*/
$("body").on("click",".uploadImg",function () {
$('#photoFile').click();
})
/*清除文件域*/
function cleanFile(){
var file = $("#photoFile") ;
file.after(file.clone().val(""));
file.remove();
}
四：后台接受文件controller层：
/**
* 上传图片
* @param photoFile
* @return
*/
@RequestMapping(value = "/url", produces = { "application/json;charset=UTF-8" }, method = {
RequestMethod.POST, RequestMethod.GET })
@ResponseBody
public BaseModel methord(MultipartFile[] photoFile) {
BaseModel baseModel = new BaseModel();
int r = 0;
if (photoFile == null || photoFile.length == 0) {
return new BaseModel("文件上传失败，请重试", r);
}
List<String> arr = new ArrayList<>();
try {
for (MultipartFile myfile : photoFile) {
if (!myfile.isEmpty()) {
Map<String, Object> map = saveFile(myfile);
if(map!=null){
r = NumberUtils.toInt(String.valueOf(map.get("ok")));
if(1 == r) {
arr.add(String.valueOf(map.get("url")));
}
}
}
}
} catch (Exception e) {
e.printStackTrace();
return new BaseModel("文件上传失败！", r);
}
baseModel.setRows(arr);
baseModel.setStatus(r);
return baseModel;
}
五：保存文件具体方法：
需要引入apache的io包,我引用的是commons-io-2.4.jar下载地址，使用它提供的FileUtils工具类
/**
* 保存文件到服务器
* @param file springMVC接收到的文件对象
* @return
*/
public Map<String,Object> saveFile(MultipartFile file){
Map<String,Object> result = new HashMap<>(3);
result.put("ok", 0);
result.put("msg", "上传失败，请稍后再试");
if(file == null || file.isEmpty()){
return result;
}
/*根目录*/
String realPath = "D:/file/image";
/*允许上传图片格式*/
String allowExt = "png,jpeg,jpg,gif";
/*上传图片名称*/
String originFileName = file.getOriginalFilename();
/*上传文件后缀，如：jpg*/
String fileExt = originFileName.substring(originFileName.lastIndexOf(".")+1, originFileName.length());
/*文件大小限制2M*/
long allowSize = 2*1024*1024;
/*判断文件格式*/
if( !allowExt.contains( "," + fileExt + "," ) ) {
result.put("msg", "不支持该类型文件上传，仅支持["+ allowExt +"]等格式");
return result;
}
/*判断文件大小*/
if( allowSize < file.getSize() ) {
result.put("msg", "文件大小超出限制，最大允许上传["+ allowSize/1024 + "KB]");
return result;
}
try {
File destFile = null;
String fileName;
/*采用年月日创建文件夹，采用时间戳创建文件名*/
Date date = new Date();
if( destFile == null ) {
String dateStr = DateUtils.DateToString(new Date(), DateStyle.YYYY_MM_DD_EN);
realPath = realPath + dateStr;
fileName = date.getTime() + "." + fileExt;
realPath = realPath + dateStr + "/" + fileName;
destFile = new File(realPath, fileName);
}
/*复制文件流*/
FileUtils.copyInputStreamToFile(file.getInputStream(),destFile);
result.put("ok", 1);
result.put("msg", "上传成功");
result.put("url",realPath);
return result;
} catch (Exception e) {
return result;
}
}
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
网友评论