form表單實現文件上傳的三種方式(適用於IE9)

因項目需要,客戶指定使用IE9進行訪問,所以,這裏先講一下,如何使用IE9進行表單提交文件

注意:ie9不支持FormData !!!

form表單代碼(提交文件一定要有  enctype="multipart/form-data"method="post" 這兩個屬性):

<form id="fileForm"  enctype="multipart/form-data" method="post">
		<div>文件:<input class="easyui-filebox" name="file" id="file" 
                 data-options="buttonText:'選擇',prompt:'請選擇上傳文件'" style="width:80%" > 
        </div>
</form>
   <div>
	 <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" 
      onclick="uploadFile()">確定</a>
  </div>

方法一:使用submit(),適用於IE9

function uploadFile(){
	 var filePath = $("#file").filebox('getValue');
	 if(null == filePath || filePath == ''){
	        $.messager.alert('系統提示:',"請選擇上傳的文件","warning");
			return false;
	 }else{
	    var url ="<%=basePath%>test/upload.do"; //後臺處理路徑
	     $("#fileForm").attr('action',url); 
		 $("#fileForm").submit();		  
	     }
	   }

方法二:使用 ajaxSubmit方法,適用於ie11、谷歌等瀏覽 

function uploadFile(){
			var actionUrl= "";//後臺方法
            $("#fileForm").attr('action',actionUrl);   
			 //關閉上傳文件 界面
			 $('#fileWindow').window('close');
			 //顯示進度條
			 $.messager.progress({
		            title:'上傳文件',
		            text:'正在上傳,請稍後....'
		      }) ;
			 var options = {
		        type: 'post',
		        //loading:true,
		        dataType: 'json', 
		        success:function(data){
		        	//處理回調函數
		        },
		        error:function(data){
                    alert('系統提示:','附件上傳失敗!');
		        },
		        complete: function(){
				}
		 	};
		 	$("#fileForm").ajaxSubmit(options);
		}

方法三:使用ajax

function uploadFile(){
           var formData = new FormData($('#fileForm')[0]);//獲取表單中的文件
           $.ajax({
               url:"upload",//後臺的接口地址
               type:"post",//post請求方式
               data:formData,//參數
               cache: false,
               processData: false,
               contentType: false,
               success:function (data) {
                   //處理返回參數
               },error:function () {
                   alert("操作失敗~");
               }
 
           })

}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章