Ajax提交带文件的表单并且得到上传进度

这里记录了几种ajax提交表单的方式；
一、普通表单使用ajax提交；
二、文件上传并且设置进度条的两种实现方式；

1.使用jQuery 的 ajaxSubmit实现（推荐，因为比较简单）；
2.普通ajax实现；

进度条的实现使用了BootStrap的样式：http://www.runoob.com/bootstrap/bootstrap-progress-bars.html

一、普通表单使用ajax提交；

HTML代码

<form id="myformz" action="" method="post">
        用户名<input type="text" id="mobile" name="mobile"> 
        密码<input type="text" id="passwd" name="passwd"> 
        <input type="button" onClick="sbum();">
    </form>

js代码

<script type="text/javascript">
    function subm() {
        $.ajax({
            type : "POST",//提交方式
            url : "loginController/texts.do",//提交地址
            data : $("#myformz").serialize(),//序列化表单值，创建 URL 编码文本字符串。
            success : function(data) {
                alert("请求成功");
            },
            erreo : function(request) {
                alert("请求失败");
            }
        });

    }
</script>

但是，这种方式是不能提交文件的，后台根本检测不到提交的数据中有文件； data : $("#myformz").serialize(),//序列化表单值，创建 URL 编码文本字符串。这段代码就是把表单的值序列化了。固然后台接不到文件信息。

二、文件上传并且设置进度条两种方式的实现；

1.使用jQuery 的 ajaxSubmit实现获取上传进度并设置进度条（推荐）；

        $('#uploadFileForm').ajaxSubmit({
            type:'post',  
            url::"请求地址", 
            processData: false, //需设置为false,因为data值是FormData对象，不需要对数据做处理
            contentType: false, //需设置为false,因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
            resetForm: true,  //成功提交后，是否重置所有表单元素的值
    	    uploadProgress: function (event, position, total, percentComplete) {
    	    	if(percentComplete > 100){
    	    		percentComplete = 100;
    	    	}
    	    	var percentVal = percentComplete + '%'; 
    	    	$("#uploadFile_rate").html(percentVal);  		// 文件上传进度显示值
    	    	$("#uploadFile_progressBar").width(percentVal); // 进度条状态
    	    
    	    	}, 
           success:function(data){
				alert("上传文件成功！");
	        	$("#uploadFile_progressBar").width("0px"); // 进度条状态
            },
            error:function(){ 
            	alert("上传文件失败，请重试！");
            }
    }); 

**

2.普通ajax实现获取上传进度并设置进度条；

（推荐使用第一种方式，具体根据情况而定）
**

HTML代码

<form id="myForm">
        用户名<input type="text" id="mobile" name="mobile"> 
        密码<input type="text" id="passwd" name="passwd"> 
        图片<input type="file" id="lastname" name="file">
        <input type="button" onClick="sbum();">
    </form>

js代码

<script type="text/javascript">

	//验证上传的图片格式是否正确
	function subm() {
	
		var filepath = $("input[name='file']").val();
		
		if(filepath !=""){
		var extStart = filepath.lastIndexOf(".");
		var ext = filepath.substring(extStart, filepath.length).toUpperCase();

		if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG"
				&& ext != ".JPEG") {
			alert("图片限于bmp,png,gif,jpeg,jpg格式");
			return false;
		} else {

	//提交表单
	submTo();
	
	}
		}else{
		//提交表单
		submTo();
		}
	}
	
	//提交表单的方法
		function submTo(){
	
	    var form=new FormData(document.getElementById("myForm"));//拿到表单对象
		$.ajax({
				type : "POST",//提交方式
			    url : "gallery/updateGa.do",//提交地址
			    cache: false,    //上传文件不需缓存
				data:form,
				async:true,  //这里要设置异步上传，才能成功调用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函数
				processData:false,//需设置为false，因为data值是FormData对象，不需要对数据做处理
				contentType:false,//需设置为false，因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
			    xhr:function(){                        
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress',function(e){                            
                        var loaded = e.loaded;                  //已经上传大小情况 
                        var total = e.total;                      //附件总大小 
                        var percent = Math.floor(100*loaded/total);     //已经上传的百分比  
                         if(percent > 100){
    	    				percent = 100;
    	    			}
                       // console.log("已经上传了："+percent);                 
                     $("#uploadFile_progressBar").css("width",percent+"%"); // 设置进度条动画                                                          
                    }, false);
                }
                return myXhr;
            }, 
				success : function(data) {
				if(data=="1"){
				alert("修改成功！");
				}else{
				alert("网络错误，请重试！！！");
				}
					
				},
				erreo : function(request) {
					alert("网络错误，请重试！！！");
				}
			});

	
	}
	
</script>

上述代码中 processData:false, contentType:false,
必须设置为false。如上所示，一个简单的带文件的表单提交就完成了。