1. 首頁 > 生活百科 >

ajax上傳圖片到服務器操作 ajax提交圖片上傳

使用場景是這樣的： 在進行圖片上傳的時，開發人員使用的上傳圖片方式是Iframe + 傳統的 http post 來處理的 。而且未建立統一上傳函數 。
于是我心血來潮將代碼改造了 。心想來個ajax異步上傳圖片吧，這技術應該很老套了 。于是直接打開強大的 cnblogs(博客園) 輕松的找到了這篇文章直接依葫蘆畫瓢，將該作者的勞動成果直接“拿來主義了” 。很快就把代碼全改造了 。可是當我把程序發布到服務器上的時問題來了 。上傳文件失效了！汗～ 都是偷懶造成的惡果 。繼續打開先前參考的那篇文章 。原來作者解釋了只能在本地使用而不能發布到服務器上 。心想我難道還得用 iframe + http post 這個 郁悶的方式么？？
于是不甘心的我打開了更加強大的google，開始全球搜索尋求解決方案，終于功夫不負有心人 。找到了 “jquery.form.js”。
異步上傳圖片的步驟如下：
1.引用 jquery js 框架（這東西的好處無需多論）后再引用 “jquery.form.js” 。
2.建立一般處理程序 ashx 。
核心代碼如下：
html:
復制代碼 代碼如下:
<asp:Content ID=”Content3″ ContentPlaceHolderID=”Head” runat=”server”>
<script src=https://www.cnfyg.com/shcs/”” type=”text/javascript”>
<script src=https://www.cnfyg.com/shcs/”” type=”text/javascript”>
<script type=”text/javascript”>
$(function () {
//上傳圖片
$(“#btnUpload”).click(function () {
if ($(“#flUpload”).val() == “”) {
alert(“請選擇一個圖片文件，再點擊上傳 。”);
return;
【ajax上傳圖片到服務器操作 ajax提交圖片上傳】}
$(‘#UpLoadForm’).ajaxSubmit({
success: function (html, status) {
var result = html.replace(“<pre>”, “”);
result = result.replace(“</pre>”, “”);
$(“#image”).attr(‘src’, result);
alert(result);
}
});
});
});
ashx 如下：
復制代碼 代碼如下:
namespace TestMvc.Utility
{
/// <summary>
/// Summary description for PicUploadHander
/// </summary>
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回調出上傳成功后圖片在服務器上的相對路徑 。總的來說此方式相對傳統的上傳圖片方式要強一些 。

    推薦閱讀