jquery-weui 文件批量上传

最新推荐文章于 2023-10-24 10:27:15 发布

qq_40833411

最新推荐文章于 2023-10-24 10:27:15 发布

阅读量505

点赞数

分类专栏： java js jquery-weui 文章标签： jquery-weui 图片批量上传

本文链接：https://blog.csdn.net/qq_40833411/article/details/88531418

版权

java 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

jquery-weui

1 篇文章 0 订阅

订阅专栏

由于juery-weui 设计上传内置插件只有样式
我自己结合网上亲测可行的文件批量上传后端用的java

<body>
	<!--图片上传-->
        <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"></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>
                            <form id="wu-forms2" method="post" enctype="multipart/form-data">
                            <div class="weui-uploader__input-box">
                                <input class="weui_uploader_input js_file"  id="uploaderInput" name="uploadfile[]"type="file" name="uploadfile[]" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="multiple">
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="setImg2(this)">按钮</a>
 <div class="weui_dialog_alert" style="display: none;">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
      <div class="weui_dialog_hd"> <strong class="weui_dialog_title">提示</strong>
      </div>
      <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
      <div class="weui_dialog_ft">
        <a href="javascript:;" id='sure' class="weui_btn_dialog primary">确定</a>
      </div>
    </div>
  </div>       
</body>


<script>

var allFile = [];

var form =$("#wu-forms2")
var formData  = new FormData(form);
    mui.init();
    $(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;
                $.each(files, function (index, item) {
                    var fileName = item.name;
                    var fileEnd = fileName.substring(fileName.indexOf("."));
                    //上传文件格式判断
                        allFile.push(item);
                        //追加文件
                        formData.append('uploadfile[]',item);
                   
                });
                for(var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
 
                    if(url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }
 					
                    $uploaderFiles.append($(tmpl.replace('#url#', src)));
                }
            });
        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() {
        	allFile.splice(index,1);
        	formData= new FormData(form);
        	 $.each(allFile, function (index, item) {
                 var fileName = item.name;
                 var fileEnd = fileName.substring(fileName.indexOf("."));
                 //上传文件格式判断
                     //追加文件
                     formData.append('uploadfile[]',item);
                
             });
        	
            $uploaderFiles.find("li").eq(index).remove();
        });
        
        
       
    });
    function setImg2(obj){
    	//这里type 可以添加 图片所需附件信息
    	formData.append("type",0)
    	   var len = formData.getAll('uploadfile[]').length;
  		if(len>0){
  			 $.ajax({
  				type:"post",
  				url:"Upload.do",
  				data: formData,
  				processData: false,
  				contentType: false,
  				success:function(data){
  					if(data.errCode!=0){
  						$(".weui_dialog_alert").show();
  						$(".weui_dialog_bd").html("上传成功")
  						$("#sure").click(function(){
  							window.location.reload()
  						})
  					}else{
  						$(".weui_dialog_alert").show();
  						$(".weui_dialog_bd").html("上传失败")
  						$("#sure").click(function(){
  							window.location.reload()
  						})
  					}
  				}
  			});
  		}else{
  			$.alert("请选择需要上传的图片")
  		}
   }
    
    
</script>

引入样式

 		<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css" />
		 <link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.css">
		<link rel="stylesheet" href="css/main.css">
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/fastclick.js"></script>
		<script src="js/jquery-weui.js"></script>
		<script src="js/Zepto.min.js"></script>

后端接受代码

@RequestMapping(value = "/Upload")
	@ResponseBody
	public Result upload(HttpServletRequest request,
			HttpServletResponse response) {
		Result rd = new Result ();
		try {
		CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(
				request.getSession().getServletContext());
		// 设置编码
		commonsMultipartResolver.setDefaultEncoding("utf-8");
		   MultipartHttpServletRequest resolveMultipart = commonsMultipartResolver.resolveMultipart(request);  
		List<MultipartFile> files = resolveMultipart.getFiles("uploadfile[]");
		String[] strings = resolveMultipart.getParameterMap().get("type");
		String upfile = service.uploadFiles(files);
	    rd.setErrCode(0);
	    rd.setErrMsg("文件上传成功");
		} catch (Exception e) {
			e.printStackTrace();
			rd = new ReturnData(1, "err");
		}
		return rd;
	}

qq_40833411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-weui 文件批量上传

由于juery-weui 设计上传内置插件只有样式我自己结合网上亲测可行的文件批量上传后端用的java&lt;body&gt; &lt;!--图片上传--&gt; &lt;div class="weui-gallery" id="gallery"&gt; &lt;span class="weui-gallery__img" id=&quo
复制链接

扫一扫

专栏目录