網上非常多關於該插件的介紹,我這裏簡單介紹一下吧。(個人觀點)
ajaxfileupload插件主要是用ajax上傳文件(圖片)到服務器,通過插件創建的隱藏的表單和iframe來提交,然後獲得返回值,它是一款jquery插件。
語法:$.ajaxFileUpload([options])
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
錯誤提示:
1,SyntaxError: missing ; before statement錯誤
如果出現這個錯誤就需要檢查url路徑是否可以訪問
2,SyntaxError: syntax error錯誤
如果出現這個錯誤就需要檢查處理提交操作的服務器後臺處理程序是否存在語法錯誤
3,SyntaxError: invalid property id錯誤
如果出現這個錯誤就需要檢查文本域屬性ID是否存在
4,SyntaxError: missing } in XML expression錯誤 如果出現這個錯誤就需要檢查文件name是否一致或不存在
5,其它自定義錯誤
大家可使用變量$error直接打印的方法檢查各參數是否正確,比起上面這些無效的錯誤提示還是方便很多。
使用方法:
第一步:
引入jquery和ajaxfileupload.js
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/ajaxfileupload.js"></script>
推薦ajaxfileuploap.js的文件下載地址:http://download.csdn.net/detail/baidu_25343343/9814096
第二步:
HTML代碼:
<input type="file" name="file" >
注意:<input type="file">這個標籤必須要有name值,最好也是file,不然可能無法上傳文件(圖片)到服務器
第三步:
js代碼:
$.ajaxFileUpload
(
{
url: url, //用於文件上傳的服務器端請求地址
secureuri: false, //是否需要安全協議,一般設置爲false
fileElementId: 'file', //文件上傳域的ID
dataType: 'json', //返回值類型 一般設置爲json
data:{
//請求參數
},
success: function (data, status,e) //服務器成功響應處理函數
{
//data是服務器返回的數據
},
error: function (data, status, e)//服務器響應失敗處理函數
{
//data是服務器返回的數據
}
}
);
這裏是簡單的介紹如何使用。。。
具體的例如:
1.輸入框的樣式 2.上傳文件按鈕 3.上傳成功或者上傳失敗之後的回調函數 。。。
這些都要讀者自己去思考。