快捷導(dǎo)航

asp.net javascript 文件無刷新上傳實(shí)例代碼

更新時間：2009年06月13日 19:47:05 作者：

最近在寫C# .net代碼的時候，遇到一個上傳刷新的問題。

第二種方法：用js動態(tài)創(chuàng)建form和iframe上傳文件，實(shí)現(xiàn)無刷新。優(yōu)點(diǎn)是代碼量小，無需客戶端安裝控件，缺點(diǎn)就是上傳有限制大小，下面看代碼：
需要文件有：1個前臺頁面upload.html、 1個js函數(shù) function upFile、 1個處理文件accept.aspx(accept.aspx.cs)
upload.html

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

 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>無標(biāo)題頁</title> 
<script src="upload.js" src="upload.js" language="jscript" type="text/jscript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="width:100%"> 
<iframe name='hidden_frame' id="hidden_frame" style='width:150px; height:50px; display:none;'> </iframe> 
<input type="file" id="hidFilePath" /> 
<input id="upBtn" type="button" class="clearBtn" style="display:none;" value="上傳圖片" onclick="upFile('hidFilePath');" /> 
</div> 
</form> 
</body> 
</html> 

function upFile

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

 
function upFile(ob) 
{ 
var file = document.getElementById(ob) ; 
var newName = "FileName"; //設(shè)置文件保存的名字 

var form=document.createElement('form'); 
document.body.appendChild(form); 
form.encoding="multipart/form-data"; 
form.method = "post"; 
form.action= "accept.aspx?nm=" + newName; 
form.target= "hidden_frame"; 
var pos=file.nextSibling; //記住file在舊表單中的的位置 
form.appendChild(file); 
form.submit(); 
pos.parentNode.insertBefore(file,pos); 
document.body.removeChild(form); 
} 

accept.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="up.aspx.cs" Inherits="Member_up" %>
accept.aspx.cs

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

 
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 


public partial class Member_up : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
string mz = HttpContext.Current.Request.QueryString["nm"].ToString(); 
string uperr = ""; 
HttpFileCollection files = HttpContext.Current.Request.Files; 

if (files.Count>0) 
{ uperr = upSingleFile(files[0], mz); } 
else { uperr = "ok"; } 
HttpContext.Current.Session["upInfo"] = uperr; 
Response.Write(uperr); 
} 


//上傳文件 
private string upSingleFile(HttpPostedFile file, String theFileName) 
{ 
string infos = ""; 
bool fileOK = false; 

string fileName, fileExtension ; 
fileName = System.IO.Path.GetFileName(file.FileName); 
if (fileName != "") 
{ 
if (file.ContentLength >= 1024 * 1024 * 2) 
{ 
infos = "上傳文件太大，目前僅支持2M以內(nèi)的圖片上傳！"; 
} 
else 
{ 
fileExtension = System.IO.Path.GetExtension(fileName).ToLower(); 
String[] allowedExtensions = { ".jpg", ".jpeg", ".gif", ".bmp", ".png", ".icon" }; 
for (int i = 0; i < allowedExtensions.Length; i++) 
{ 
if (fileExtension == allowedExtensions[i]) 
{ 
fileOK = true; 
break; 
} 
} 
if (!fileOK) 
{ 
infos = "不支持上傳此類型文件！目前支持的圖片格式有：jpg|jpeg|gif|bmp|png|icon"; 
} 
else 
{ 
file.SaveAs(System.Web.HttpContext.Current.Request.MapPath("~/books/BookPic/") + theFileName); 
infos = "ok" + theFileName; 
} 
} 
} 
else 
{ 
infos = "沒有讀取到文件！"; 
} 
return infos; 
} 
} 