快捷導(dǎo)航

Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼

更新時(shí)間：2010年11月04日 22:55:54 作者：

這是數(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:

復(fù)制代碼代碼如下:

 
<asp:Content ID="Content3" ContentPlaceHolderID="Head" runat="server"> 
<script src="<%=Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script> 
<script src="<%=Url.Content("~/Scripts/jquery.form.js") %>" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//上傳圖片 
$("#btnUpload").click(function () { 
if ($("#flUpload").val() == "") { 
alert("請(qǐng)選擇一個(gè)圖片文件，再點(diǎn)擊上傳。"); 
return; 
} 
$('#UpLoadForm').ajaxSubmit({ 
success: function (html, status) { 
var result = html.replace("<pre>", ""); 
result = result.replace("</pre>", ""); 
$("#image").attr('src', result); 
alert(result); 
} 
}); 
}); 
}); 

ashx 如下：

復(fù)制代碼代碼如下:

 
namespace TestMvc.Utility 
{ 
/// <summary> 
/// Summary description for PicUploadHander 
/// </summary> 
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)一些。
本例代碼在此下載，F(xiàn)ireFox 下測(cè)試通過(guò)。http://xiazai.jb51.net/201011/yuanma/AjaxUploadPic.rar

您可能感興趣的文章: