springMVC上传图片+ajaxufilepload.js异步提交数据+选择完毕直接执行上传操作

最新推荐文章于 2021-11-23 14:31:19 发布

鱼香肉丝加蛋

最新推荐文章于 2021-11-23 14:31:19 发布

阅读量967

点赞数 2

分类专栏： Java javascript 文章标签： spring mvc 上传 ajaxupload java jsp

本文链接：https://blog.csdn.net/qq_34273222/article/details/54428580

版权

Java 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

项目中需要用到上传图片的功能，经各种查阅资料和实验，最终实现了利用ajaxupload.js异步提交数据上传图片。因为需要在项目针对移动端，顾把input设为了透明，再另做按钮调用。为了有同需求的人，特此整理如下：

上传文件，用的是input type=“file”加了一个属性：accept=”image/*” 限制上传文件的类型，当然也可以用此例子来上传其他文件。
jsp代码：

首先引入js

<script type="text/javascript" src="/resources/js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="/resources/js/ajaxfileupload.js"></script>

ajaxfileupload.js 网上可以下载到，但因为常年不更新，其中有些方法出现了问题，大家可以下载我上传的文件，我已经参照资料修改好了。

 <input type="file" style="opacity: 0;" accept="image/*" id="uploadFile" name ="thefile" onchange="ajaxFileUpload();">
 <!-- style="opacity: 0;",这是用来隐藏该input的，以设置为透明的原理，如果大家在pc端或者需要显示，可以去掉。 -->
<!-- 设置 onchange="ajaxFileUpload();" 属性，实现当选择完文件后，直接执行上传函数  -->

<div onclick="fileUplod();">任意设置</div><!-- 这个div只是示例，可以设置想要的样式，甚至放一张图片，调用另一个函数来执行选择文件 -->
 function fileUplod(){
        $("#uploadFile").trigger("click");
    } 

function ajaxFileUpload() { 
        var img=$('#uploadFile').val();
            //alert(img);
        if(img==null||img==""){
            alert("请选择封面图片！");
            return false;
        }else{
        $.ajaxFileUpload({  
            url:'/column/upload', //服务器端请求地址  
            secureuri: false, //是否需要安全协议，一般设置为false  
            fileElementId: 'uploadFile', //文件上传域的ID  
            dataType: 'json', //返回值类型 一般设置为json  
            enctype:'multipart/form-data',//注意一定要有该参数  
            success: function (data)  //服务器成功响应处理函数  
            {  

                data = eval("("+data.split(">")[1]+")");
                //当设置为json返回类型的时候，不知道为什么解析出来有问题，我需要的是返回的map，为了能成功解析，所以用此语句删掉了map前的一个头，在js里面我已把map后的头去掉了。
                if(data.code=='999'){
                //alert(data.msg);       //data是从服务器返回来的值
             }else{
                    data = eval("("+data.split(">")[1]+")");
                    alert(data.msg);       //data是从服务器返回来的值       
            }
            },  
            error: function (data, status, e)//服务器响应失败处理函数  
            {  
                data = eval("("+data.split(">")[1]+")");
                alert(data.msg);  

            }  
        }) 
        } 
    }  
    </script>

java代码：

/**
     * 上传图片方法
     * */
     @ResponseBody
     @RequestMapping(value="/column/upload")
     public Object upLoad(HttpServletRequest request, HttpServletResponse response) 
       throws IllegalStateException, IOException{
        //获取上传路径，这里我是配置在我的文件中，如果没有配置，可以直接定义上传路径。
        String publicuploadpath = ResourcePropertiesParam.getParam("publicuploadpath");

         Map<String,String> map = new HashMap<>();
      //解析器解析request的上下文
      CommonsMultipartResolver multipartResolver = 
        new CommonsMultipartResolver(request.getSession().getServletContext()); 
      //先判断request中是否包涵multipart类型的数据，
      if(multipartResolver.isMultipart(request)){
       //再将request中的数据转化成multipart类型的数据
       MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
       Iterator iter = multiRequest.getFileNames();
       while(iter.hasNext()){
        MultipartFile file = multiRequest.getFile((String)iter.next());
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        if(file != null&&!"".equals(file)){
         String fileName = ApplicationUtils.randomUUID()+new Date().getTime();
         String path = publicuploadpath+"/"+sdf.format(new Date())+"/"+ fileName+".jpg";
         File localFile = new File(path);
         if (!localFile.exists()) {
             localFile.mkdirs();
         }
         //保存文件
         file.transferTo(localFile);
         //获取访问路径
        String publicurlString = ResourcePropertiesParam.getParam("publicfilewebsiteurl")+"/"+sdf.format(new Date())+"/"+ fileName+".jpg";
        //因为项目中的图片会上传到图片的服务器，所以在访问路径是单独配置的，如果没有配置，可以自己手动修改访问路径。
        map.put("code","999"); 
        map.put("msg","上传成功");
        map.put("picurl", publicurlString);
        }else{
            map.put("code","000"); 
            map.put("msg","上传失败");
        }
       }
      }
      return map;
     }

当然，因为是springMVC的框架中，所以还得在spring-mvc.xml配置bean：

 <!-- 配置springMVC处理上传文件的信息 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"/>
        <property name="maxUploadSize" value="10485760000"/>
        <property name="maxInMemorySize" value="40960"/>
    </bean>