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