功能：ajaxFileUpload是1個(gè)異步上傳文件的jQuery插件
語(yǔ)法：$.ajaxFileUpload([options])
options參數(shù)說(shuō)明：
url 上傳處理程序地址。
fileElementId 需要上傳的文件域的ID，即<input type="file">的ID。
secureuri 是不是啟用安全提交，默許為false。
dataType 服務(wù)器返回的數(shù)據(jù)類(lèi)型。可以為xml,script,json,html。如果不填寫(xiě)，jQuery會(huì)自動(dòng)判斷。
success 提交成功后自動(dòng)履行的處理函數(shù)，參數(shù)data就是服務(wù)器返回的數(shù)據(jù)。
error 提交失敗自動(dòng)履行的處理函數(shù)。
data 自定義參數(shù)。這個(gè)東西比較有用，當(dāng)有數(shù)據(jù)是與上傳的圖片相干的時(shí)候，這個(gè)東西就要用到了。
type 當(dāng)要提交自定義參數(shù)時(shí)，這個(gè)參數(shù)要設(shè)置成post。
毛病提示:
1，SyntaxError: missing ; before statement毛病 如果出現(xiàn)這個(gè)毛病就需要檢查url路徑是不是可以訪問(wèn)
2，SyntaxError: syntax error毛病 如果出現(xiàn)這個(gè)毛病就需要檢查處理提交操作的服務(wù)器后臺(tái)處理程序是不是存在語(yǔ)法毛病
3，SyntaxError: invalid property id毛病 如果出現(xiàn)這個(gè)毛病就需要檢查文本域?qū)傩訧D是不是存在
4，SyntaxError: missing } in XML expression毛病 如果出現(xiàn)這個(gè)毛病就需要檢查文件name是不是1致或不存在
5，其它自定義毛病 大家可以使用變量$error直接打印的方法檢查各參數(shù)是不是正確，比起上面這些無(wú)效的毛病提示還是方便很多。
使用方法：
1.先引入jQuery與ajaxFileUpload插件，注意前后順序。
<script src="jquery⑴.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
2.HTML代碼段
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上傳" />
<p><img id="img1" alt="上傳成功啦" src="" /></p>
</body>
3.js代碼
<script src="jquery⑴.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$(":button").click(function ()
{
ajaxFileUpload();
})
})
function ajaxFileUpload()
{
$.ajaxFileUpload({
url: '/upload.aspx', //用于文件上傳的服務(wù)器端要求地址
secureuri: false, //是不是需要安全協(xié)議，1般設(shè)置為false
fileElementId: 'file1', //文件上傳域的ID
dataType: 'json', //返回值類(lèi)型 1般設(shè)置為json
success: function (data, status) //服務(wù)器成功響應(yīng)處理函數(shù)
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined'){
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服務(wù)器響應(yīng)失敗處理函數(shù)
{
alert(e);
}
})
return false;
}
</script>
4.后臺(tái)頁(yè)面upload.aspx代碼
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小為:" + files[0].ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
