關於ajax提交file上傳檔案型別的表單的一些例項及遇到的問題和解決辦法
ajax提交的表單有兩種情況：
第一種：input type型別沒有file上傳檔案型別的表單
第二種：input type型別有file上傳檔案型別的表單
之所以分為兩種：是因為原生ajax是不能提交檔案的,因為ajax與後臺的通訊是通過字串的.
第一種無file型別表單的ajax上傳方式：
以下寫的JQuery語法的ajax：
導jQuery包
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
$.ajax({
url:"<%=request.getContextPath()%>/UserServlet?operator=webLoadPhoto",
type:"post",
data: $("#form1").serialize(),
success:function(data) {
}
error:function(data){
}
})
引數解釋：
- url：傳送請求的地址
- type：請求的方式 get/post
- data：繫結表單id為form1， serialize（）方法表示將這個表單序列化
- success : function(){}： ajax提交成功後的回撥函式
- error:function(){}：ajax提交失敗後的回撥函式
上面這種是最簡單的無file型別的表單提交，網上還有其他寫法，如果想要了解其他寫法的話我後續會寫上
第二種有file型別表單的ajax上傳方式：
由於上傳file型別的表單步驟雖然多，但是仔細看是不難的！建議大家有耐心的去看我的解說
先從網上下載一個jQuery.form.js提交表單的外掛
地址：https://plugins.jquery.com/form/
導jQuery包
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jQuery.Form.js" type="text/javascript"></script>
$("#upload").click(function(){ //某個按鈕的點選事件
document.getElementById("form1").encoding="multipart/form-data";
// 注意上面第一點：file型別表單需要把表單的 enctype屬性值設為 enctype="multipart/form-data" 讓後臺知道這是一個二進位制表單提交型別.
有時候這個enctype會由於一些問題導致後臺識別不了是二進位制表單提交，如果有這種情況，enctype="multipart/form-data" 換成 encoding="multipart/form-data" 或者兩個一起寫上去
var option = {
url :"<%=request.getContextPath()%>/UserServlet?operator=webLoadPhoto",
type :"post",
clearForm:false,
resetForm:false,
success : function(data) {
alert('上傳成功!');
}
};
})
$("#form1").ajaxSubmit(option);
return false;
)}
引數解釋：
var option是一個JavaScript物件的定義
- url：傳送請求的地址
- type：請求的方式 get/post
- clearForm:表示提交ajax後是否清空表單字面值 （input type=text 框這裡有你輸入的值例如 11111，如果clearForm值為true，那麼ajax提交後會清空框上的值11111）
- resetForm:表示提交ajax後是否重置表單值 （input type=text 框這裡有你輸入的值例如 11111，如果resetForm值為true，那麼ajax提交後會清空 框上的值11111，同時重置成剛載入表單時候的input type=text的樣子。）
- 第三第四點注意區別！
- success : function(){}： ajax提交成功後的回撥函式
- error:function(){}：ajax提交失敗後的回撥函式
- $("#form1").ajaxSubmit(option); 是jQuery.form.js的一個ajax提交表單的方法，它可以優秀的把含有file型別的表單提交給後臺
ps：reset是重置成最初狀態，最初狀態是可能有預設值的
clear是清空form控制元件