.net利用ajax技術實現圖片上傳並回顯到介面
阿新 • • 發佈：2019-02-03
最近在開發過程中遇到了一個非常鬱悶的問題，就是圖片傳到fileUpload中時想要實現回顯到image控制元件中。
在前臺，fileUpload.change()事件中判斷fileUpload.val()不為空，把改路徑值賦給image.attr("src",$('#fileUpload的ID').val())，
IE和火狐都無法實現，反而2345王牌瀏覽器可以實現讀取本地路徑的功能，
再用ajax非同步呼叫函式，獲取本地路徑後再返回本地路徑，同樣無法實現，估計是跟瀏覽器的許可權有關。
那麼重點開始了，現在採用其他思路試試吧。
先來給fileUpload的change事件繫結一個upload的javascript函式，
//上傳照片 function upload() { var u = ""; var options = { url: "../services/upload.ashx",//處理程式路徑 type: "post", success: function (msg) {//回撥函式--請求成功 if (msg.toString().substring(0, 3) == "ERR") {// alert(msg.substring(3, msg.length)); } else { $("#img_tx").attr("src", msg);//回顯圖片 } }, error:function(err){ alert("123"); } }; //將options傳給ajaxForm $('#form1').ajaxSubmit(options); }
在這個函式中，我們呼叫了upload.ashx處理程式，該程式實現程式碼如下：
因為這裡採用Session傳遞檔名，所以一定要引用IRequiresSessionState介面
同時新增下面三個引用
using System.Drawing;
using System.Web.SessionState;
using System.Web.Services;
public class upload : IHttpHandler,IRequiresSessionState{ /// <summary> /// 上傳照片 /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { HttpFileCollection files = context.Request.Files; string path = "";//照片路徑 bool errorflag = true; string tishi = ""; if (files.Count > 0)//Form中獲取檔案物件 { HttpPostedFile file = files[0]; if (file.ContentLength > 0)//檔案大小大於零 { string fileName = file.FileName;//檔名 int fileSize = file.ContentLength;//檔案大小 if (fileName.Substring(fileName.Length - 4, 4).ToLower() == ".jpg")//只支援.jpg檔案上傳 { try { Bitmap bitmap = new Bitmap(file.InputStream);//獲取圖片檔案 if (bitmap.Width > 480 || bitmap.Height > 640) { errorflag = false; tishi = "照片太大，請將照片調整為320*240畫素尺寸！"; } if (bitmap.Width < 120 || bitmap.Height < 160) { errorflag = false; tishi = "照片太小，請將照片調整為320*240畫素尺寸！"; } if (bitmap.Width > bitmap.Height) { errorflag = false; tishi = "照片的寬度比不符合要求，請將高度比調整為4:3！"; } if (fileSize > 100 * 1024) { errorflag = false; tishi = "照片的大小不符合要求，請將照片調整為100kb以內！"; } } catch { errorflag = false; tishi = "照片錯誤，上傳檔案非影象檔案！"; } } else { errorflag = false; tishi = "照片格式錯誤，請上傳JPG格式照片檔案！"; } } } else { errorflag = false; tishi = "照片錯誤，上傳照片檔案為0位元組！"; } if (errorflag) { string extension = ".jpg"; context.Session["zpname"] = Guid.NewGuid().ToString();//建立唯一檔名 path = "../zhaopian/" + context.Session["zpname"].ToString() + extension;//指定儲存路徑以及檔名，也就是完整相對路徑 files[0].SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));//儲存檔案（將相對路徑轉化為絕對路徑） context.Response.Write(path);//相應給客戶端該照片的相對路徑 } else { context.Response.Write("ERR" + tishi); } }
<span style="font-size:24px;background-color: rgb(255, 102, 102);"><strong>到這裡，我們已經能夠實現當用戶選擇路徑之後回顯到介面的功能了。</strong></span>下面附加一個功能模組，將照片以及使用者修改的資訊新增到資料庫中。首先，看一下前臺是如何使用ajax呼叫後臺函式的：<pre class="html" name="code">//Document.ready()
$(function () {
//儲存使用者修改資訊
$('#b_xgxx').click(function () {
var upzp = false;//預設不上傳照片
if ($('#fu_tx').val() != "") {//如果fileUpload有路徑，就指定上傳照片
upzp = true;
}
$.ajax({
url: "../services/WebService.asmx/modify_ZJXX",
type: "post",
contentType: "application/json;charset=utf-8",
dataType: 'json',
async: false,
data: "{xm:'"+$('#t_xm').val()+"',sclydm:'"+$('#t_sclydm').val()+"',zhwt:'"+$('#t_zhwt').val()+"',zjjs:'"+$('#t_zjjs').val()+"',upzp:"+upzp+"}",
success: function (response) {
if (response.d != "") {
alert(response.d);
}
},
error:function(err){
alert(err);
}
})
});在提交按鈕按下事件中，首先判斷fu_tx是否有值，如果有就上傳照片，如果沒有，就不用上傳照片，只上傳其他資訊然後，看一下後臺modefy_ZJXX函式的寫法：<p>[WebMethod(EnableSession = true)]
public string modify_ZJXX(string xm, string sclydm, string zhwt, string zjjs,bool upzp)
{
Model.T_ZHUANJIA model = (Model.T_ZHUANJIA)Session["ZJXX"];
string tishi = "";
if (upzp == true)
{
//獲取圖片資訊
if (Session["zpname"].ToString().Trim() == "")
{
tishi = "請選擇需要上傳的照片";
}
else
{
//獲取絕對路徑
string path = Server.MapPath("~/web/zhaopian/" + Session["zpname"].ToString() + ".jpg");
//讀取照片檔案
FileStream fs = new FileStream(path, FileMode.Open, FileAccess.Read);
Byte[] bytes=new byte[fs.Length];
fs.Read(bytes, 0, (int)fs.Length);
fs.Dispose();//釋放資源
fs.Close();//關閉檔案流
model.ZJTX = bytes;//給專家頭像變數賦值
File.Delete(path);//刪除伺服器中的圖片檔案</p><p> }
}
//獲取修改的其他資訊，並寫入資料庫
model.XM = xm;
model.SCLYDM = sclydm;
model.ZHWT = zhwt;
model.ZJJS = zjjs;
BLL.B_ZHUANJIA.UpdateZhuanJia(model, out tishi);//插入資料庫中
return tishi;
}</p><p>其中有部分變數未說明，這裡只做主要思路的介紹，一些無關的變數可以不用考慮。</p>