Asp.net 2.0 無刷新圖片上傳 顯示縮略圖 具體實現(xiàn)
更新時間：2013年06月07日 11:57:00 投稿：shangke
簡單三步實現(xiàn)圖片無刷新上傳：注意是上傳，至于上傳時的驗證，比如圖片的尺寸，大小，格式。自行解決。如果我搞定了，也會貼上來的。
第一步：我們需要加載幾個JS庫。
jquery庫。
jquery.form.js庫。
下載這兩個庫，并引用到頁面中。
以下為頁面中 JS 代碼：
復制代碼 代碼如下:
function upload() {
var options = {
type: "POST", //當然這個是傳送方式
url: '../Include/Files.ashx', //一般處理程序的路徑
success: function (msg) { //返回的參數(shù)
$("#server_img").attr("src", msg); //回顯圖片。
}
};
// 將options傳給ajaxForm
$('#aspnetForm').ajaxSubmit(options);
}
第二步：一般處理程序內(nèi)的代碼
復制代碼 代碼如下:
public void ProcessRequest(HttpContext context)
{
HttpFileCollection files = context.Request.Files; // From中獲取文件對象
if (files.Count > 0)
{
string path = ""; //路徑字符串
Random rnd = new Random();
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i]; //得到文件對象
if (file.ContentLength > 0)
{
string fileName = file.FileName;
string extension = Path.GetExtension(fileName);
int num = rnd.Next(5000, 10000); //文件名稱
path = "../../UserFiles/temp/" + num.ToString() + extension;
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path)); //保存文件。
}
}
context.Response.Write(path); //返回文件存儲后的路徑，用于回顯。
}
}
第三步：html或者aspx中的代碼。
復制代碼 代碼如下:
<img id="server_img" width="360px" style="border: 1px solid #ccc; padding: 2px;" title="" alt="" /> //用于回顯圖片
<asp:FileUpload ID="Up_load" runat="server" onchange="upload()" ontextchange="upload()"/> //上傳圖片，自動的，兩個事件是為了保證所有瀏覽器都兼容。
相關文章
Asp.net中使用DapperExtensions和反射來實現(xiàn)一個通用搜索
這篇文章主要介紹了Asp.net中使用DapperExtensions和反射來實現(xiàn)一個通用搜索功能，非常不錯，具有參考解決價值,需要的朋友可以參考下2017-03-03
剛剛接觸網(wǎng)頁開發(fā)，不過遇到URR參數(shù)傳遞錯誤的問題，兩個頁面進行信息交互時可以用url進行傳遞，但是如果傳遞信息的編碼格式不是UTF-8（或者不是設置的默認格式）URL傳遞時會出現(xiàn)亂碼。2009-06-06
.NET Core控制臺應用程序如何使用異步（Async）Main方法詳解
這篇文章主要給大家介紹了關于.NET Core控制臺應用程序如何使用異步（Async）Main方法的相關資料，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
詳解.net core webapi 前后端開發(fā)分離后的配置和部署
這篇文章主要介紹了.net core webapi 前后端開發(fā)分離后的配置和部署，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要給大家介紹了關于ASP.NET Core處理管道的深入理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要介紹了.net mvc session失效問題,本文通過問題分析，解決過程分步驟給大家介紹的非常詳細，需要的朋友可以參考下2016-09-09
ASP.NET抓取網(wǎng)頁內(nèi)容的實現(xiàn)方法
這篇文章主要介紹了ASP.NET抓取網(wǎng)頁內(nèi)容的實現(xiàn)方法,涉及使用HttpWebRequest及WebResponse抓取網(wǎng)頁內(nèi)容的技巧,需要的朋友可以參考下2015-02-02
使用EF Code First搭建簡易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫遷移
這篇文章介紹了使用EF Code First搭建簡易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫遷移的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
本文主要介紹了ASP.NET文本框密碼賦默認值的方法，代碼簡單易懂，需要的朋友可以看下2016-12-12
這篇文章主要介紹了asp.net截屏功能實現(xiàn)截取web頁面,是非常實用的一個功能,需要的朋友可以參考下2014-08-08