weUI 上传图片

前端代码用的是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的代码，里面添加了一些限制和修改了一部分;

$(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();
    }
 

————————————————
 
原文链接：https://blog.csdn.net/qq_33589648/article/details/79867579