ajax+fromData 上传图片

ajax+fromData 上传图片
2016年08月10日 18:04:17
阅读数：2902


前台部分：

1.图片文件需要预览，网页因安全考虑，不允许image加载本地路径图片，借鉴滤镜法进行图片预览

html部分：

[html] view plain copy
  1. <label class="form-label col-xs-4 col-sm-3">照片：</label>  
  2.                 <div class="col-xs-8 col-sm-9">  
  3.                     <img class="col-xs-4 col-sm-3 " id="serverImage" name="serverImage">  

依然使用image作为图片容器

js部分：

[javascript] view plain copy
  1. function srcChanged(imagId,fileId){  
  2.          var pic = document.getElementById(imagId);  
  3.             var file = document.getElementById(fileId);  
  4.             if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现  
  5.                oFReader = new FileReader();  
  6.                oFReader.readAsDataURL(file.files[0]);  
  7.                oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};          
  8.             }  
  9.             else if (document.all) {//IE8-  
  10.                 file.select();  
  11.                 var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径  
  12.                 if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片  
  13.                 else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先  
  14.                     pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";  
  15.                     pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片，要不会显示红xx  
  16.                 }  
  17.             }  
  18.             else if (file.files) {//firefox6-  
  19.                 if (file.files.item(0)) {  
  20.                     url = file.files.item(0).getAsDataURL();  
  21.                     pic.src = url;  
  22.                 }  
  23.             }  
  24.     }  
以上  即可实现图片预览 

2.文件的传输：使用ajax搭配fromData

首先需要对from进行fromData的序列处理，之后遍可以通过ajax将数据传输到后台，后台对收到的request进行处理，取出所需参数

html：

[html] view plain copy
  1. <form class="form form-horizontal" action="" id="formServerUpdate">  
  2.             <div class="row cl">  
  3.                 <label class="form-label col-xs-4 col-sm-3">照片：</label>  
  4.                 <div class="col-xs-8 col-sm-9">  
  5.                     <img class="col-xs-4 col-sm-3 " id="serverImage" name="serverImage">  
  6.                     <span class="btn-upload form-group mt-50"> <a  
  7.                         href="javascript:void();" class="btn btn-primary radius"><i  
  8.                             class="Hui-iconfont">�</i> 更改图片 </a> <input type="file"  
  9.                         id="imageFile" onchange="srcChanged('serverImage','imageFile') "  
  10.                         name="imageFile" accept="image/*" class="input-file">  
  11.                     </span>  
  12.                 </div>  
  13.             </div>  
  14.             <div class="row cl">  
  15.                 <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">  
  16.                     <input id="btnSubmit" class="btn btn-success radius size-L"  
  17.                         type="button" value="  提交  ">  
  18.                 </div>  
  19.             </div>  
  20.         </form>  
js：
[javascript] view plain copy
  1. $("#btnSubmit").click(  
  2.   
  3.             function(){  
  4.                     if (!check ().form ())  
  5.                         return;  
  6.                 var oData = new FormData($("#formServerUpdate")[0] ); //记得别掉了[0]，不然后台得不到sh  
  7.                 $.ajax({  
  8.                     type : 'post',//请求方式为post  
  9.                     datatype : 'json',//服务端返回的数据类型  
  10.                     url : "server/updateServer",//接收数据的映射接口  
  11.                     data : oData,  
  12.                     /**    
  13.                      * 必须false才会避开jQuery对 formdata 的默认处理    
  14.                      * XMLHttpRequest会对 formdata 进行正确的处理    
  15.                      */    
  16.                     processData : false,  
  17.                     contentType : false,//"application/x-www-form-urlencoded",//直接用对象接收时，必须这么写；若要发送json格式数据，可写成“application/json”，用注解@RequestBody String str接收  
  18.                     success : function(data) {  
  19.                         var arr = eval("(" + data  
  20.                                 + ")");  
  21.                         //                          alert(arr.login);  
  22.                         if (arr.state == "true") {  
  23.                             //                              alert("sdsadsa");  
  24.                             alert("修改成功");  
  25.                             window.parent.location.reload();  
  26.                         } else {  
  27.                             alert("出了点小问题，请稍候重试");  
  28.                         }   
  29.   
  30.                           
  31.                     },//ajax请求成功后调用该方法  
  32.                     error :   
  33.                         function(XMLHttpRequest, textStatus, errorThrown) {  
  34.                          alert(XMLHttpRequest.status);  
  35.                          alert(XMLHttpRequest.readyState);  
  36.                          alert(textStatus);  
  37.                            }  
  38.   
  39.                 })  
  40.             });  
java后台接受与处理：

[java] view plain copy
  1. @RequestMapping( value = "/updateServer", method = RequestMethod.POST )  
  2.     @ResponseBody  
  3.     public updateServer( HttpServletRequest request )  
  4.     {  
  5.         Server server = new Server();  
  6.         MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest)request;  
  7.         Map<String, Object> result = null;  
  8.         try  
  9.         {  
  10.   
  11.             MultipartFile file = mRequest.getFile( "imageFile" );  
  12.             String fileName = file.getOriginalFilename();  
  13.             String serverCardId = mRequest.getParameter( "serverCardId" );  
  14.             if ( StringUtils.isNotBlank( fileName ) )//确保前天提交来的表单中有file  
  15.             {  
  16.                 String strFilePath = request.getServletContext()  
  17.                         .getRealPath( "/" ) + "upload/photo/";//将文件保存到本地路径  
  18.                 String serverPhotoSrc = FileSave.fileSaveSrc( file,  
  19.                         serverCardId, strFilePath );//将文件保存，并返回文件名  
  20.             }  
  21.   
  22.         }  catch ( IOException e )  
  23.         {  
  24.             // TODO Auto-generated catch block  
  25.             e.printStackTrace();  
  26.         } catch ( Exception e )  
  27.         {  
  28.             e.printStackTrace();  
  29.         }  
  30.     }  
ps：关于文件的保存方法

[java] view plain copy
  1. public static String fileSaveSrc( MultipartFile file, String fileName,  
  2.            String fileSrc ) throws IOException  
  3.    {  
  4.        String fileOriginalName = file.getOriginalFilename();  
  5.        if ( StringUtils.isNotBlank( fileOriginalName ) )//确保传入file不是null  
  6.        {  
  7.            String fileType = fileOriginalName  
  8.                    .substring( fileOriginalName.lastIndexOf( "." ) );//得到文件后缀名  
  9.              
  10.            String tempName = fileName + fileType;<span style="font-family: Arial, Helvetica, sans-serif;">// 使用传入名称替换图片原本名称，防止乱码以及覆盖其他文件问题</span>  
  11.   
  12.            File uploadfile = new File( fileSrc + tempName );//将文件重新组装起来  
  13.            if ( !uploadfile.exists() )  
  14.            {  
  15.                uploadfile.mkdirs();//创建文件  
  16.            }  
  17.            file.transferTo( uploadfile );//将文件上传保存  
  18.            return tempName;//成功返回文件名  
  19.        } else  
  20.        {  
  21.            return "";  
  22.        }  
  23.   
  24.    }  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hsdying/p/9012543.html