使用ajaxFileUpload实现文件异步上传

时间:2022-12-07 16:55:57


 最近在项目中遇到要使用ajax提交包含file输入框的表单的情况,网上查了下,发现ajaxFileUpload.js插件的比较多。就研究了下,发现真的不错。

传统的包含file输入框的表单提交遇到的问题:

       1.表单要添加“enctype=multipart/form-data”,这样后台就无法像普通表单提交那样通过request.getParameter(name)来获得用户提交的参数。

        2.表单一定要使用submit提交,不能使用ajax将表单信息序列化异步提交。这样就导致了不能实现提交结果的异步刷新和响应。

//传统表单的ajax序列化异步提交      

artDialog.confirm('确认要保存用户信息?',function(){

$.ajax({
        type: "POST",
        url:$("#form").attr("action"),
        data:$('#form').serialize(),// 要提交的表单 
        dataType:'json',
        success: function(data) {
        if(data){
        artDialog.alert(data.message);
                   if(data.succeed == true){
                    gotoView('<%=path%>/userManage/getlist.do');
                  }  
        }   
        }
    });
});


ajaxFileUpload的使用:

1.js的引入

       <script src="<%=path%>/resource/js/jquery.js"></script>

      <script type="text/javascript" src="<%=path%>/js/ajaxfileupload.js"></script>


2.file文本框,不受enctype=multipart/form-data的限制,可单独提交

                <img src="<%=path%>/resource/images/sex1.png" style="width:160px;height:204px;">

               <input type="file" name="fileToUpload" class="input">  
               <a href="Javascript:void(0);" οnclick="ajaxFileUpload();">上传头像</a>


3.js上传代码——核心

         $.ajaxFileUpload({  
               url : '<%=path%>/userManage/fileToUpload.do',
               secureuri : false,  
               fileElementId : 'fileToUpload',// 上传控件的id  
               dataType : 'json',  
              success : function(data, status) {
   if(data.message) {
        alert(data.message);
   }
   if(data.succeed == true){
$("#personImage").attr("src", "<%=path%>/userManage/previewImage.do?r="+Math.random());//改变图片显示
   }
    },
error : function(data, status, e) {
alert('上传出错');
}
           }); 

4.spring mvc上传文件的配置文件spring-MVC.xml

       <!-- 配置文件上传 -->
    <bean  
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="utf-8">  
        <property name="maxUploadSize">  
            <value>104857600</value>  
        </property>  
        <property name="maxInMemorySize">  
            <value>4096</value>  
        </property>  
    </bean>  


5.控制层接受上传文件

//头像上传
@RequestMapping(value="/fileToUpload.do")
public void fileToUpload(@RequestParam("fileToUpload") MultipartFile myfile,HttpServletRequest request,HttpServletResponse response,HttpSession session){
try {
        /*System.out.println("文件原名: " + myfile.getOriginalFilename());
           System.out.println("文件名称: " + myfile.getName());
           System.out.println("文件长度: " + myfile.getSize());
           System.out.println("文件类型: " + myfile.getContentType());
           System.out.println("========================================");*/
           long size = myfile.getSize();//文件大小
           String orgFilename =  myfile.getOriginalFilename();
           String name =  myfile.getName();//input的name
           String contentType = myfile.getContentType();
           PrintWriter writer = response.getWriter();
 response.setCharacterEncoding("UTF-8");//这两句是必须的,一定要加

           if(size>1024*1024){
            jsonMap.put("succeed",false);
    jsonMap.put("message","图片大小不能超过1M!");
    writer.print("{succeed:false,message:\"图片大小不能超过1M!\"}");
           }else{
            session.setAttribute("myfileDate", myfile.getBytes());
writer.print("{");//username
//writer.print("succeed:true,message:\"文件大小:"+myfile.getSize()+",文件名:"+myfile.getName()+"\"");
writer.print("succeed:true,message:\"文件上传成功!\"");
writer.print("}");
           }
           writer.close();
} catch (Exception e) {
e.printStackTrace();
}
}


6.获得保存到session中的图片信息

        //获得上传到session中的图片信息
@RequestMapping(value="/previewImage.do")
public void previewImage(HttpServletRequest request,HttpServletResponse response,HttpSession session){
try {
byte[] photo=  (byte[]) session.getAttribute("myfileDate");
                        if(photo!=null){
                        OutputStream os = response.getOutputStream();
    InputStream is = new ByteArrayInputStream(photo); 
   
    byte buf[] = new byte[1024];
    while ((is.read(buf)) != -1) {
       os.write(buf);
    }
    is.close();
    os.close();
                        }
} catch (Exception e) {
e.printStackTrace();
}
}



遇到的问题:

1.上传文件失败时,不能进入 $.ajaxFileUpload中的error中,在火狐下查看,出现js报错。

ajaxFileUpload.js中加入下面的代码:

{
    if ( s.error ) {
    s.error.call( s.context || s, xhr, status, e );
    }
    if ( s.global ) {
    (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
    }
    }


2.ie9下明明网络请求返回的是200,但是总是提示上传文件失败;而ie8下弹窗提示出现了乱码。

        解决方法:给response设置返回字符编码格式

        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");