jQuery插件AjaxFileUpload实现ajax文件上传

来源：互联网发布：淘宝游戏专营何时开通编辑：程序博客网时间：2024/05/16 17:00

最新要给项目加一个图片上传功能，搞了很久，经历了一些波折，最终搞好。

要用ajax，最开始想到的是如下：

html代码：

<body>    <form action="uploadpicture" id="imageForm" enctype="multipart/form-data" method="POST">          <input type="file" name="picture" id=picture>          <input type="button" onclick="uploadpicture();" value="上传">       </form></body>

js代码：

function uploadpicture()        {            var picture=$("#picture").val();             $.ajax({                url:'uploadpicture',                type:'post',                //processData:'false',                contentType:'multipart/form-data',                cache : false,                dataType:'json',                data:{picture:picture},                success:function(){                    window.location.href="index.jsp";                }            });         }

但这只适合客户端和服务端在同一台机器上，因为picture=$(“#picture”).val();得到的是文件的路径+名称，而不是文件的内容。

其实用form的表单提交很容易实现：

html代码：

<body>    <form action="uploadpicture" id="imageForm" enctype="multipart/form-data" method="POST">          <input type="file" name="picture" id=picture>          <input type="submit" value="上传">       </form></body>

后台接收请求的java代码：

@RequestMapping(value="uploadpicture",method={RequestMethod.POST,RequestMethod.GET})    public @ResponseBody void testpic(HttpServletRequest request,HttpServletResponse response) throws JSONException, IOException    {        MultipartHttpServletRequest request2 = (MultipartHttpServletRequest)request;        MultipartFile pi=request2.getFile("picture");        FileOutputStream out = new FileOutputStream("C:/Users/wyz/test.jpg");        InputStream in1=pi.getInputStream();        byte[] by = new byte[1024];        int len = 0;        while((len=in1.read(by))!=-1){            out.write(by, 0, len);        }        out.close();        in1.close();        JSONObject jsonObject=new JSONObject();        jsonObject.put("result", "yes");        response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));     }

或

@RequestMapping(value="uploadpicture1",method={RequestMethod.POST,RequestMethod.GET})    public @ResponseBody void testpic1(@RequestParam("picture") MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws JSONException, IOException    {        FileOutputStream out = new FileOutputStream("C:/Users/wyz/test1.jpg");        InputStream in1=file.getInputStream();        byte[] by = new byte[1024];        int len = 0;        while((len=in1.read(by))!=-1){            out.write(by, 0, len);        }        out.close();        in1.close();        JSONObject jsonObject=new JSONObject();        jsonObject.put("result", "yes");        response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));     }

都可以实现将接收到的图片存储在C:/Users/wyz/目录下。注意form中的action请求要和java代码对应，分别是uploadpicture和uploadpicture1.

但是，项目要求不能刷新页面，所以还是要用ajax异步请求来处理

。
html代码：（和文章开头的html代码一样）

<body>    <form action="uploadpicture" id="imageForm" enctype="multipart/form-data" method="POST">          <input type="file" name="picture" id=picture>          <input type="button" onclick="uploadpicture();" value="上传">       </form></body>

js代码：
首先要引入jquery和ajaxfileupload代码

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

function uploadpicture()        {            $.ajaxFileUpload({                url: 'uploadpicture',                secureuri: false,               // data: data,                fileElementId: 'picture',                dataType: 'json',                success: function (data) {                    alert(data.result);                },                error: function (data，status,e) {                    alert(e);                }            });        }

服务端的java代码：

//处理上传的图片    @RequestMapping(value="uploadpicture",method={RequestMethod.POST,RequestMethod.GET})    public @ResponseBody void testpic(HttpServletRequest request,HttpServletResponse response) throws JSONException, IOException    {        MultipartHttpServletRequest request2 = (MultipartHttpServletRequest)request;        MultipartFile pi=request2.getFile("picture");        FileOutputStream out = new FileOutputStream("C:/Users/wyz/test.jpg");        InputStream in1=pi.getInputStream();        byte[] by = new byte[1024];        int len = 0;        while((len=in1.read(by))!=-1){            out.write(by, 0, len);        }        out.close();        in1.close();        JSONObject jsonObject=new JSONObject();        jsonObject.put("result", "yes");        response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));     }

通过这种方式可以把图片传到服务端，但是总是返回error，说明在$.ajaxFileUpload中返回的是错误，百思不得其解，甚至看了ajaxFileUpload.js的源码，没想错误就在这个源码上面。返回错误如下：
alert()错误信息的截图

在这篇博客找到问题的答案http://liwx2000.iteye.com/blog/1540321，为防止博客找不到，马上会转载下来。
解决方法：在ajaxFileUpload.js的源码中找到

uploadHttpData: function( r, type ) {        var data = !type;        data = type == "xml" || data ? r.responseXML : r.responseText;        // If the type is "script", eval it in global context        if ( type == "script" )            jQuery.globalEval( data );        // Get the JavaScript object, if JSON is used.        if ( type == "json" ){            eval( "data = " + data );        }        // evaluate scripts within html        if ( type == "html" )            jQuery("<div>").html(data).evalScripts();        return data;    },

增加内容，如下：

uploadHttpData: function( r, type ) {        var data = !type;        data = type == "xml" || data ? r.responseXML : r.responseText;        // If the type is "script", eval it in global context        if ( type == "script" )            jQuery.globalEval( data );        // Get the JavaScript object, if JSON is used.        if ( type == "json" ){            ////////////以下为新增代码///////////////              data = r.responseText;              var start = data.indexOf(">");              if(start != -1) {                var end = data.indexOf("<", start + 1);                if(end != -1) {                  data = data.substring(start + 1, end);                 }              }               ///////////以上为新增代码///////////////            eval( "data = " + data );        }        // evaluate scripts within html        if ( type == "html" )            jQuery("<div>").html(data).evalScripts();        return data;    },

完美解决。
参考
jQuery插件AjaxFileUpload实现ajax文件上传
ajaxFileUpload plugin上传文件 chrome、Firefox中出现SyntaxError:unexpected token <

0 0