asp.net javascript 文件無刷新上傳實例代碼第2/2頁
更新時間:2009年06月13日 19:47:05 作者:
最近在寫C# .net代碼的時候,遇到一個上傳刷新的問題。
第二種方法:用js動態(tài)創(chuàng)建form和iframe上傳文件,實現(xiàn)無刷新。優(yōu)點是代碼量小,無需客戶端安裝控件,缺點就是上傳有限制大小,下面看代碼:
需要文件有:1個前臺頁面upload.html、 1個js函數(shù) function upFile、 1個處理文件accept.aspx(accept.aspx.cs)
upload.html
復制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</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
復制代碼 代碼如下:
function upFile(ob)
{
var file = document.getElementById(ob) ;
var newName = "FileName"; //設置文件保存的名字
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
復制代碼 代碼如下:
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以內的圖片上傳!";
}
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;
}
}
以上為我寫程序過程中遇到過的問題和探索到的解決方法,寫下來一是自己在溫習鞏固一遍,二來是為了與大家分享,請大家指正需改進之處,以期達到共同進步!
您可能感興趣的文章:
- nodejs利用ajax實現(xiàn)網(wǎng)頁無刷新上傳圖片實例代碼
- PHP+JavaScript實現(xiàn)無刷新上傳圖片
- SpringMVC結合ajaxfileupload.js實現(xiàn)文件無刷新上傳
- jsp+ajax實現(xiàn)無刷新上傳文件的方法
- js實現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法
- js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現(xiàn)無刷新
- asp.net+js 實現(xiàn)無刷新上傳解析csv文件的代碼
- javascript仿163網(wǎng)盤無刷新文件上傳系統(tǒng)
- JavaScript實現(xiàn)無刷新上傳預覽圖片功能
相關文章
一個ASP.NET的MYSQL的數(shù)據(jù)庫操作類自己封裝的
這篇文章主要介紹了一個ASP.NET的MYSQL的數(shù)據(jù)庫操作類自己封裝的,在數(shù)據(jù)庫操作類中的連接字符串中記得加上charset=utf8 需要的朋友可以參考下2014-08-08.net采用ajax實現(xiàn)郵箱注冊和地區(qū)選擇實例
這篇文章主要介紹了.net采用ajax實現(xiàn)郵箱注冊和地區(qū)選擇的方法,以實例形式詳細講述了.net采用ajax的技巧,非常實用,需要的朋友可以參考下2014-10-10國產化中的?.NET?Core?操作達夢數(shù)據(jù)庫DM8的兩種方式(操作詳解)
這篇文章主要介紹了國產化之?.NET?Core?操作達夢數(shù)據(jù)庫DM8的兩種方式,這里提供兩種方式是傳統(tǒng)的DbHelperSQL方式和Dapper?方式,每種方式給大家介紹的非常詳細,需要的朋友可以參考下2022-04-04asp.net 簡易生成注冊碼(數(shù)字+大小寫字母)
注釋寫的很詳細,不做過多的描述了,希望能給初學者帶來一些幫助,同時也是自己知識的一個積累過程。2008-11-11Visual Studio 2017開發(fā)環(huán)境的安裝圖文教程
Visual Studio 2017是微軟于2017年3月8日正式推出的新版本,是迄今為止 最具生產力 的 Visual Studio 版本。這篇文章主要介紹了Visual Studio 2017開發(fā)環(huán)境的安裝,需要的朋友可以參考下2017-11-11asp.net實現(xiàn)導出DataTable數(shù)據(jù)到Word或者Excel的方法
這篇文章主要介紹了asp.net實現(xiàn)導出DataTable數(shù)據(jù)到Word或者Excel的方法,涉及asp.net操作office文件的相關技巧,需要的朋友可以參考下2016-08-08asp.net代碼中修改web.config節(jié)點的具體方法
在有些情況下,要在代碼中讀取一種全局變量,把這種全局變量放在web.config是一種常見的手段。2013-06-06ASP.NET Core跨站登錄重定向的實現(xiàn)新姿勢
這篇文章主要給大家介紹了關于ASP.NET Core實現(xiàn)跨站登錄重定向的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-07-07