weui多张图片上传前端+后台

一开始搞这个玩意我用原生的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大家在评论下面可以提出