ajaxFileUpload 异步上传数据

　　AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。

　　它的配置方式比较像jQuery的AJAX，使用比较方便

　　语法：$.ajaxFileUpload([options])

　　参数：

　　　　1，url　　　　　　　　　　上传处理程序地址。　　
　　　　2，fileElementId　　　　  需要上传的文件域的ID，即<input type="file">的ID。
　　　　3，secureuri　　　　　　  是否启用安全提交，默认为false。 
　　　　4，dataType　　　　　　  服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
　　　　5，success　　　　　　　  提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
　　　　6，error　　　　　　　　　提交失败自动执行的处理函数。
　　　　7，data 　　　　　　　　　自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
　　　　8, type 　　　　　　　　　 当要提交自定义参数时，这个参数要设置成post

 

　　使用步骤：

　　第一步：导入JQuery和ajaxFileUpload的js文件

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

 　　第二步：HTML代码

    <div style="200px;">
            <p><img id="img" src="" alt="头像"/></p>
            <p><input type="file" id="file" name="file" onchange="imgPreview();"/></p>
            <p>账户：<input type="text" id="username"/></p>
            <p>密码：<input type="password" id="password"/></p>
            <p><input type="button" value="注册" onclick="register();"/></p>
    </div>

 　　第三步：JS代码

/* 
        用户—注册
    */
    function register(){
        //获取账户
        var username = $('#username').val().trim();
        if(username==null || username==''){
            alert('账户为空！');
            return false;
        }
        //获取密码
        var password = $('#password').val().trim();
        if(password==null || password==''){
            alert('密码为空！');
            return false;
        }
        //获取文件
        var file = $('#file')[0].files[0];
        if(!file){
            alert('请上传头像文件！');
            return false;
        }
        
        $.ajaxFileUpload({
            "url": 'register.do',
            "secureuri": false,
            "fileElementId": "file",
            "data": {"username":username,"password":password},
            "dataType": "text",
            "success": function(result){
                alert('注册成功！');
            },
            "error": function(result){
                alert('注册失败！');
            }
        });
    }

 　　第四步：后端java处理（spring）

　    在使用MultipartHttpServletReuqest和MultipartFile类时，要对spring进行配置。

　　 具体见：http://www.cnblogs.com/gangbalei/p/6077791.html

    @RequestMapping(value="/register.do")
    public void upload(HttpServletRequest request) throws IOException{
        //获取ajaxFileUpload上传时data中传递的数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        
//      判断request是否属于MultipartHttpServletRequest对象
//        if(request instanceof MultipartHttpServletRequest){
//            MultipartHttpServletRequest    multipartRequest = (MultipartHttpServletRequest)request;
//            MultipartFile mfile = multipartRequest.getFile("file");
//        }
        
        //将request强转成MultipartHttpServletRequest对象
        MultipartHttpServletRequest    multipartRequest = (MultipartHttpServletRequest)request;
        //获取上传的文件
        MultipartFile mfile = multipartRequest.getFile("file");
        
        //设置文件存放的位置
        File dir = new File("F:/upload");
        //如果目录不存在，则创建一个该目录
        if(!dir.exists()){
            dir.mkdir();
        }
        //获取上传的文件名
        String fileName = mfile.getOriginalFilename();
        //获取请求的输入流
        InputStream in = mfile.getInputStream();
        //读取输入流的数据
        byte[] buf = new byte[1048576];
        int length = in.read(buf);
        //文件存放的完成路径
        String path = dir.getAbsolutePath()+"//"+fileName;
        //新建输出流
        FileOutputStream out = new FileOutputStream(path);
        //将数据写入输出流中
        out.write(buf, 0, length);
        //关闭输入输出流
        in.close();
        out.close();
    }

 　　注意：

　　　使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的.

　　  ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.

　　  下面红色部分为修改ajaxFileUpload.js的三处地方:

    createUploadForm: function(id, fileElementId,data)
    {
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');    
        var oldElement = $('#' + fileElementId);
        var newElement = $(oldElement).clone();
        $(oldElement).attr('id', fileId);
        $(oldElement).before(newElement);
        $(oldElement).appendTo(form);
        if (data) { 
                for (var i in data) { 
                 $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
                } 
        }
        //set attributes
        $(form).css('position', 'absolute');
        $(form).css('top', '-1200px');
        $(form).css('left', '-1200px');
        $(form).appendTo('body');        
        return form;
    },

 　　在ajaxFileUpload: function(s)的内容中

var form = jQuery.createUploadForm(id, s.fileElementId,s.data);