這是數(shù)月前的事情了，場(chǎng)景是這樣的： 在進(jìn)行圖片上傳的時(shí)，我發(fā)現(xiàn)開(kāi)發(fā)人員使用的上傳圖片方式是Iframe + 傳統(tǒng)的 http post 來(lái)處理的。

而且未建立統(tǒng)一上傳函數(shù)。于是將代碼改造了。心想來(lái)個(gè)ajax異步上傳圖片吧，這技術(shù)應(yīng)該很老套了。于是直接打開(kāi)強(qiáng)大的cnblogs輕松的找到了 這篇文章 直接依葫蘆畫(huà)瓢，將該作者的勞動(dòng)成果直接“拿來(lái)主義了”。很快就把代碼全改造了。可是當(dāng)我把程序發(fā)布到服務(wù)器上的時(shí)問(wèn)題來(lái)了。上傳文件失效了！汗～ 都是偷懶造成的惡果。繼續(xù)打開(kāi)先前參考的那篇文章。原來(lái)作者解釋了只能在本地使用而不能發(fā)布到服務(wù)器上。心想我難道還得用 iframe + http post 這個(gè) 郁悶的方式么？？

于是不甘心的我打開(kāi)了更加強(qiáng)大的google，開(kāi)始全球搜索尋求解決方案，終于功夫不負(fù)有心人。找到了 "jquery.form.js" 。

異步上傳圖片的步驟如下：

1.引用 jquery js 框架(這東西的好處無(wú)需多論)后再引用 “jquery.form.js”。

2.建立一般處理程序 ashx。

核心代碼如下：

html:

$(function () {

//上傳圖片

$("#btnUpload").click(function () {

if ($("#flUpload").val() == "") {

alert("請(qǐng)選擇一個(gè)圖片文件，再點(diǎn)擊上傳。");

return;

}

$('#UpLoadForm').ajaxSubmit({

success: function (html, status) {

var result = html.replace("

", "");

result = result.replace("

", "");

$("#image").attr('src', result);

alert(result);

}

});

});

});

ashx 如下：

namespace TestMvc.Utility

{

///

/// Summary description for PicUploadHander

///

public class PicUploadHander : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

//驗(yàn)證上傳的權(quán)限TODO

string _fileNamePath = "";

try

{

_fileNamePath = context.Request.Files[0].FileName;

//開(kāi)始上傳

string _savedFileResult = UpLoadImage(_fileNamePath, context);

context.Response.Write(_savedFileResult);

}

catch

{

context.Response.Write("上傳提交出錯(cuò)");

}

}

注：整個(gè)上傳使用ajax 異步數(shù)據(jù)，同時(shí)jquery回調(diào)出上傳成功后圖片在服務(wù)器上的相對(duì)路徑。總的來(lái)說(shuō)此方式相對(duì)傳統(tǒng)的上傳圖片方式要強(qiáng)一些。

本例代碼在此下載，FireFox 下測(cè)試通過(guò)。http://xiazai.jb51.net/201011/yuanma/AjaxUploadPic.rar

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的ajax jq 图片上传请求头_Jquery ajaxsubmit上传图片实现代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。