|
|
本帖最后由 hongniu 于 2015-6-25 16:28 編輯
這個(gè)客戶就是上帝的年代里一個(gè)好的用戶體驗(yàn)比實(shí)用的功能要得民心，上傳大文件時(shí)長期的白屏自己看著都煩。何況是吊的不能再吊甲方。
借用jquery.from.js插件實(shí)現(xiàn)異步無刷新上傳文件。話說如果是自己去實(shí)現(xiàn)的話太麻煩了，這不是重點(diǎn)、重點(diǎn)是我不會(huì)。
工具：Jquery.js 、 jquery.form.js
思路：aspx頁面ajax提交文件給后臺(tái)ashx處理保存，處理后返回給前天一個(gè)處理結(jié)果。
詳細(xì)：前臺(tái)使用html兩個(gè)控件：一個(gè)是button另一個(gè)當(dāng)然是丑到爆的file
1、拖入必須的兩個(gè)控件
<form id="fm1" method="post"> <input type="file" id="btnfile" value="提交" />
<input type="button" id="btn" value="上傳" />
</form>
2、 編寫JQuery，給button綁定當(dāng)定單擊事件
$(function () { // 頁面加載完后觸發(fā) $("#btn").click(function () { // id為btn的按鈕綁定單擊事件
$("#fm1").ajaxSubmit({
url: "UploadFileHandler.ashx",
type: "post",
success: function (data) {
alert(data);
}
});
});
})
3、后臺(tái)ashx處理文件并保存
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 獲取上傳的文件的對(duì)象
HttpPostedFile img = context.Request.Files["btnfile"];
// 獲取上傳文件的名稱
string s = img.FileName;
// 截取獲得上傳文件的名稱(ie上傳會(huì)把絕對(duì)路徑也連帶上，這里只得到文件的名稱)
string str = s.Substring(s.LastIndexOf("\\") + 1);
string path = "~/UploadFiles/" + str;
// 保存文件
img.SaveAs(context.Server.MapPath(path));
// HttpRuntime.AppDomainAppVirtualPath主要是獲取應(yīng)用程序虛擬路徑名稱，因?yàn)轫憫?yīng)給頁面時(shí)不會(huì)自動(dòng)添加而導(dǎo)致無法顯示圖片
//context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring(1));//path.Substring(1)用來去除第一個(gè)~字符
context.Response.Write("提示：文件上傳成功！");
}
4、到此為止就可以實(shí)現(xiàn)異步上傳了，但是你會(huì)發(fā)現(xiàn)上傳4M以上的文件就會(huì)出錯(cuò)。所以還需要在配置文件中修改一下文件最大值以及響應(yīng)時(shí)間。
<httpRuntime targetFramework="4.5" maxRequestLength="1048576" executionTimeout="3600" />
|
|
QQ好友和群
QQ空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
