這是數月前的事情了，場景是這樣的： 在進行圖片上傳的時，我發現開發人員使用的上傳圖片方式是Iframe + 傳統的 http post 來處理的。

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

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

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

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

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

核心代碼如下：

html:

$(function () {

//上傳圖片

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

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

alert("請選擇一個圖片文件，再點擊上傳。");

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";

//驗證上傳的權限TODO

string _fileNamePath = "";

try

{

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

//開始上傳

string _savedFileResult = UpLoadImage(_fileNamePath, context);

context.Response.Write(_savedFileResult);

}

catch

{

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

}

}

注：整個上傳使用ajax 異步數據，同時jquery回調出上傳成功后圖片在服務器上的相對路徑。總的來說此方式相對傳統的上傳圖片方式要強一些。

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。