一开始搞这个玩意我用原生的html来写是真的丑，最后网上找了很多但是没什么完整的，所以自己写了个完整的，大神轻喷
前端代码用的是weUI封装好的样式（这里我加了最多三张的限制），可以调动相机
<div class="weui-gallery" id="gallery"> <span class="weui-gallery__img" id="galleryImg"></span> <div class="weui-gallery__opr"> <a href="javascript:" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete" style="margin-bottom: 50px"></i> </a> </div> </div> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">图片上传(最多三张)：</p> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="uploaderFiles"> </ul> <div class="weui-uploader__input-box"> <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="" capture="camera"> </div> </div> </div> </div> </div> </div>js代码 基本还是weui的代码，里面添加了一些限制和修改了一部分;这个地方根据网友的修改，更改fileArr.splice(index,index)为
fileArr.splice(index,1);
$(function() { var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>', $gallery = $("#gallery"), $galleryImg = $("#galleryImg"), $uploaderInput = $("#uploaderInput"), $uploaderFiles = $("#uploaderFiles"); $uploaderInput.on("change", function(e) { var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files; var length=fileArr.length; for(var i = 0, len = files.length; i < len; ++i) { var file = files[i]; if(length + i + 1 > 3) { break; } fileArr.push(file); if(url) { src = url.createObjectURL(file); } else { src = e.target.result; } $uploaderFiles.append($(tmpl.replace('#url#', src))); } checkPhotoSize(); }); //控制显示三张以内照片 function checkPhotoSize(){ if(fileArr.length>2){ $(".weui-uploader__input-box").hide(); }else{ $(".weui-uploader__input-box").show(); } } var index; //第几张图片 $uploaderFiles.on("click", "li", function() { index = $(this).index(); $galleryImg.attr("style", this.getAttribute("style")); $gallery.fadeIn(100); }); $gallery.on("click", function() { $gallery.fadeOut(100); }); //删除图片 $(".weui-gallery__del").click(function() { $uploaderFiles.find("li").eq(index).remove(); fileArr.splice(index,1); checkPhotoSize(); });js提交文件到后台
var fileArr=new Array();这里需要一个全局变量来接受文件
if(fileArr.length!=0){ var formData = new FormData(); for(var i = 0;i<fileArr.length;i++){ formData.append("file[]",fileArr[i]); } $.ajax({ url: "../../xxx/xxx.do", type: "POST", async: false, cache: false, processData: false,// 告诉jQuery不要去处理发送的数据 contentType: false,// 告诉jQuery不要去设置Content-Type请求头 data: formData, success: function(data){ } }); } $.toast("保存成功", 5000); window.location.href = "xxxx.html"; }else{ $.toast("未知错误，请于管理员联系", 2000); }java后台接收代码 （这个后台代码也是从网上找的，但是网上代码有很多问题，根据实际来改）
@ResponseBody @RequestMapping("/xxxx.do") public String uploadPictureList( HttpServletRequest request) throws Exception{ MultipartHttpServletRequest muRequest =(MultipartHttpServletRequest) request; List<MultipartFile> files = muRequest.getFiles("file[]"); File targetFile=null; String msg="";//返回存储路径 int code=1; List imgList=new ArrayList(); /*if (files!=null && files.length>0) { for (int i = 0; i < files.length; i++) {*/ if (files!=null && files.size()>0) { for (int i = 0; i < files.size(); i++) { //String fileName=files[i].getOriginalFilename();//获取文件名加后缀 String fileName=files.get(i).getOriginalFilename();//获取文件名加后缀 if(fileName!=null&&fileName!=""){ String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径 String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置 String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀 fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名 //先判断文件是否存在 String fileAdd = DateUtil.formatDate(new Date(),"yyyyMMdd"); File file1 =new File(path+"//"+fileAdd); //如果文件夹不存在则创建 if(!file1 .exists() && !file1 .isDirectory()){ file1 .mkdirs(); } targetFile = new File(file1, fileName); //targetFile = new File(path); //System.out.println(targetFile+"xc"); try { // files[i].transferTo(targetFile); files.get(i).transferTo(targetFile); msg=returnUrl+fileAdd+"/"+fileName; imgList.add(msg); } catch (Exception e) { e.printStackTrace(); } } } } return JSONArray.fromObject(imgList).toString(); }
如有不当之处请各位指教，如有疑问可加QQ：201239785或2228037791
如有bug大家在评论下面可以提出
