asp.net javascript 文件無(wú)刷新上傳實(shí)例代碼第2/2頁(yè)
第二種方法:用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)文章
解決Win10無(wú)法安裝.Net Framework 3.5提示錯(cuò)誤代碼0x800F081F
這篇文章主要介紹了Win10無(wú)法安裝.Net Framework 3.5提示錯(cuò)誤代碼0x800F081F的完美解決方法,需要的朋友可以參考下2017-12-12
Asp.net開(kāi)發(fā)常用的51個(gè)非常實(shí)用的代碼
Asp.net開(kāi)發(fā)常用的51個(gè)非常實(shí)用的代碼,需要的朋友可以參考下。2010-06-06
asp.net登錄驗(yàn)證碼實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了asp.net登錄驗(yàn)證碼實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
asp.net下獲取遠(yuǎn)程網(wǎng)頁(yè)的內(nèi)容之二(downmoon原創(chuàng))
asp.net下獲取遠(yuǎn)程網(wǎng)頁(yè)的內(nèi)容之二(downmoon原創(chuàng))...2007-04-04
asp.net下讓Gridview鼠標(biāo)滑過(guò)光棒變色效果
Gridview光棒效果 鼠標(biāo)滑過(guò)2010-07-07
IdnentiyServer使用客戶端憑據(jù)訪問(wèn)API的實(shí)例代碼
這篇文章主要介紹了IdnentiyServer-使用客戶端憑據(jù)訪問(wèn)API的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
asp.net中倒計(jì)時(shí)自動(dòng)跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法(使用javascript)
本篇文章介紹了,asp.net中倒計(jì)時(shí)自動(dòng)跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)方法(使用javascript)。需要的朋友參考下2013-05-05
VS2005 水晶報(bào)表在時(shí)部署時(shí)遇到的問(wèn)題
前幾天在服務(wù)器上部署一個(gè)B/S程序的時(shí)候,程序中的水晶報(bào)表部分出了些問(wèn)題,報(bào)錯(cuò):Server Error in '/' Application.2010-02-02

