ajax+fromData 上传图片

前台部分：

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

html部分：

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

依然使用image作为图片容器

js部分：

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

以上即可实现图片预览

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

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

html：

[html] view plaincopy
<form class="form form-horizontal" action="" id="formServerUpdate">  
            <div class="row cl">  
                <label class="form-label col-xs-4 col-sm-3">照片：</label>  
                <div class="col-xs-8 col-sm-9">  
                    <img class="col-xs-4 col-sm-3 " id="serverImage" name="serverImage">  
                    <span class="btn-upload form-group mt-50"> <a  
                        href="javascript:void();" class="btn btn-primary radius"><i  
                            class="Hui-iconfont">�</i> 更改图片 </a> <input type="file"  
                        id="imageFile" onchange="srcChanged('serverImage','imageFile') "  
                        name="imageFile" accept="image/*" class="input-file">  
                    </span>  
                </div>  
            </div>  
            <div class="row cl">  
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">  
                    <input id="btnSubmit" class="btn btn-success radius size-L"  
                        type="button" value="  提交  ">  
                </div>  
            </div>  
        </form>  

js：

[javascript] view plaincopy
$("#btnSubmit").click(  
  
            function(){  
                    if (!check ().form ())  
                        return;  
                var oData = new FormData($("#formServerUpdate")[0] ); //记得别掉了[0]，不然后台得不到sh  
                $.ajax({  
                    type : 'post',//请求方式为post  
                    datatype : 'json',//服务端返回的数据类型  
                    url : "server/updateServer",//接收数据的映射接口  
                    data : oData,  
                    /**    
                     * 必须false才会避开jQuery对 formdata 的默认处理    
                     * XMLHttpRequest会对 formdata 进行正确的处理    
                     */    
                    processData : false,  
                    contentType : false,//"application/x-www-form-urlencoded",//直接用对象接收时，必须这么写；若要发送json格式数据，可写成“application/json”，用注解@RequestBody String str接收  
                    success : function(data) {  
                        var arr = eval("(" + data  
                                + ")");  
                        //                          alert(arr.login);  
                        if (arr.state == "true") {  
                            //                              alert("sdsadsa");  
                            alert("修改成功");  
                            window.parent.location.reload();  
                        } else {  
                            alert("出了点小问题，请稍候重试");  
                        }   
  
                          
                    },//ajax请求成功后调用该方法  
                    error :   
                        function(XMLHttpRequest, textStatus, errorThrown) {  
                         alert(XMLHttpRequest.status);  
                         alert(XMLHttpRequest.readyState);  
                         alert(textStatus);  
                           }  
  
                })  
            });  

java后台接受与处理：

[java] view plaincopy
@RequestMapping( value = "/updateServer", method = RequestMethod.POST )  
    @ResponseBody  
    public updateServer( HttpServletRequest request )  
    {  
        Server server = new Server();  
        MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest)request;  
        Map<String, Object> result = null;  
        try  
        {  
  
            MultipartFile file = mRequest.getFile( "imageFile" );  
            String fileName = file.getOriginalFilename();  
            String serverCardId = mRequest.getParameter( "serverCardId" );  
            if ( StringUtils.isNotBlank( fileName ) )//确保前天提交来的表单中有file  
            {  
                String strFilePath = request.getServletContext()  
                        .getRealPath( "/" ) + "upload/photo/";//将文件保存到本地路径  
                String serverPhotoSrc = FileSave.fileSaveSrc( file,  
                        serverCardId, strFilePath );//将文件保存，并返回文件名  
            }  
  
        }  catch ( IOException e )  
        {  
            // TODO Auto-generated catch block  
            e.printStackTrace();  
        } catch ( Exception e )  
        {  
            e.printStackTrace();  
        }  
    }  

ps：关于文件的保存方法

[java] view plaincopy
public static String fileSaveSrc( MultipartFile file, String fileName,  
           String fileSrc ) throws IOException  
   {  
       String fileOriginalName = file.getOriginalFilename();  
       if ( StringUtils.isNotBlank( fileOriginalName ) )//确保传入file不是null  
       {  
           String fileType = fileOriginalName  
                   .substring( fileOriginalName.lastIndexOf( "." ) );//得到文件后缀名  
             
           String tempName = fileName + fileType;<span style="font-family: Arial, Helvetica, sans-serif;">// 使用传入名称替换图片原本名称，防止乱码以及覆盖其他文件问题</span>  
  
           File uploadfile = new File( fileSrc + tempName );//将文件重新组装起来  
           if ( !uploadfile.exists() )  
           {  
               uploadfile.mkdirs();//创建文件  
           }  
           file.transferTo( uploadfile );//将文件上传保存  
           return tempName;//成功返回文件名  
       } else  
       {  
           return "";  
       }  
  
   }  