Javascript与asp.net 实现Ajax多文件无刷新上传【转】
2007-12-08 23:42
996 查看
无刷新上传主要的HTML代码（upload.html）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AjaxUpload</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<style type="text/css" media="all">
*{
margin:0;
padding:0;
}
img{border:none;}
ul{
list-style-type:none;
}
ul li{
padding:2px 4px;
}
body{
font-family: 宋体, 黑体,verdana, Arial;
font-size:12px;
color:#333;
background:#DDDDDD;
margin:30px;
padding:0;
}
.box{
border:1px solid #CCC;
background:#FFF;
padding:8px;
margin:5px;
clear:both;
}
.title {
background:#F0F0F0;padding:5px;
font-weight:bold;
}
.tooltip{
background:#F0F0F0;
border-color:#bbb;
}
.tooltip h1 {
color:#A8DF00;
font-family: 微软雅黑,黑体,宋体,verdana, Arial;
}
.titlebutton{
float:right;
}
.uploading{
background:#FFF;
color:#444;
text-align:left;
width:500px;
padding:4px;
}
.image{
border:1px solid #ddd;
margin:2px;
padding:1px;
display:inline;
width:300px;
}
.uploadcontrol {
margin:4px 0;
border-bottom:1px solid #F0F0F0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
for(var i=0;i<5;i++)
{
uploadcreate($("#uploadbox"),i);
}
});
var hideDiv = function(idName){
$("#"+idName).fadeOut("fast");
};
//是否显示上传后的图片
var isshowpic = true;
var uploadshowpic = function(el){
isshowpic = !(isshowpic);
if(isshowpic)
{
el.html("图片显示关闭");
}
else
{
el.html("图片显示开启");
}
};
//载入中的GIF动画
var loadingUrl = "images/ajax-loader.gif";
//选择文件后的事件,iframe里面调用的
var uploading = function(imgsrc,itemid){
var el = $("#uploading"+itemid);
$("#ifUpload"+itemid).fadeOut("fast");
el.fadeIn("fast");
el.html("<img src='"+loadingUrl+"' align='absmiddle' /> 上传中");
return el;
};
//重新上传方法
var uploadinit = function(itemid){
currentItemID ++;
$("#uploading"+itemid).fadeOut("fast",function(){
$("#ifUpload"+itemid).fadeIn("fast");
$("#panelViewPic"+itemid).fadeOut("fast");
});
};
//上传时程序发生错误时，给提示，并返回上传状态
var uploaderror = function(itemid){
alert("程序异常，"+itemid+"项上传未成功。");
uploadinit();
};
//上传成功后的处理
var uploadsuccess = function(newpath,itemid){
$("#uploading"+itemid).html("文件上传成功. <a href='javascript:void(0);' onclick='uploadinit("+itemid+");'>[重新上传]</a>");
if(isshowpic)
{
$("#panelViewPic"+itemid).html("<a href='"+newpath+"' title='点击查看大图' target='_blank'><img src='"+newpath+"' alt='' style='width:300px;' /></a>");
$("#panelViewPic"+itemid).fadeIn("fast");
}
};
var currentItemID = 0; //用于存放共有多少个上传控件了
//创建一个上传控件
var uploadcreate = function(el,itemid){
currentItemID ++;
if(itemid == null)
{
itemid = currentItemID;
}
var strContent = "<div class='uploadcontrol'><iframe src="upload.aspx?id="+itemid+"" id="ifUpload"+itemid+"" frameborder="no" scrolling="no" style="width:400px; height:28px;"></iframe>";
strContent += "<div class="uploading" id="uploading"+itemid+"" style="display:none;" ></div>";
strContent += "<div class="image" id="panelViewPic"+itemid+"" style="display:none;"></div></div>";
el.append(strContent);
};
</script>
</head>
<body>
<div id="tipbox" class="box tooltip">
<a href="#" onclick="hideDiv('tipbox');">[关闭]</a>
<div class="content">
<h1>AjaxUpload - 多文件无刷新上传源代码 v1.0</h1>
<p>作者:李华顺 <a href="http://huacn.cnblogs.com" target="_blank">http://huacn.cnblogs.com</a></p>
</div>
</div>
<div id="toolbox" class="tooltip box">
<a href="#" onclick="uploadcreate($('#uploadbox'));">添加一个新上传控件</a> <a href="#" onclick="uploadshowpic($(this));">图片显示关闭</a>
</div>
<div id="uploadbox" class="box">
</div>
</body>
</html>
上传功能的页面代码（upload.aspx）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<style type="text/css">
*{ margin:0; padding:0; }
</style>
<script type="text/javascript">
var uploadSelect = function(el){
el.fadeOut("show");
parent.uploading(document.getElementById("<%=file1.ClientID %>").value,'<%=itemID %>');
$("#<%=frmUpload.ClientID %>").submit();
};
</script>
</head>
<body>
<form runat="server" id="frmUpload" method="post" enctype="multipart/form-data">
<input type="file" runat="server" id="file1" size="40" onchange="uploadSelect($(this));" />
</form>
</body>
</html>
上传功能的服务端代码（upload.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;
using System.IO;
public partial class upload : System.Web.UI.Page
{
string picPath = "";
string picServer = "/upload";
protected string itemID = "";
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["id"] != null)
{
itemID = Request.QueryString["id"];
}
if (IsPostBack)
{
picPath = Server.MapPath("/upload");
doUpload();
}
}
protected void doUpload()
{
try
{
HttpPostedFile file = file1.PostedFile;
string strNewPath = GetSaveFilePath() + GetExtension(file.FileName);
file.SaveAs(picPath+strNewPath);
string urlPath = picServer + strNewPath;
urlPath = urlPath.Replace("/", "/");
WriteJs("parent.uploadsuccess('" + urlPath + "','" + itemID + "'); ");
}
catch (Exception ex)
{
WriteJs("parent.uploaderror();");
}
}
private string GetExtension(string fileName)
{
try
{
int startPos = fileName.LastIndexOf(".");
string ext = fileName.Substring(startPos, fileName.Length - startPos);
return ext;
}
catch (Exception ex)
{
WriteJs("parent.uploaderror('" + itemID + "');");
return string.Empty;
}
}
private string GetSaveFilePath()
{
try
{
DateTime dateTime = DateTime.Now;
string yearStr = dateTime.Year.ToString(); ;
string monthStr = dateTime.Month.ToString();
string dayStr = dateTime.Day.ToString();
string hourStr = dateTime.Hour.ToString();
string minuteStr = dateTime.Minute.ToString();
string dir = dateTime.ToString(@"/yyyyMMdd");
if (!Directory.Exists(picPath + dir))
{
Directory.CreateDirectory(picPath + dir);
}
return dir + dateTime.ToString("//yyyyMMddhhmmssffff");
}
catch (Exception ex)
{
WriteJs("parent.uploaderror();");
return string.Empty;
}
}
protected void WriteJs(string jsContent)
{
this.Page.RegisterStartupScript("writejs","<script type='text/javascript'>"+ jsContent+"</script>");
}
}
基本上就是这些，重点请看第一部份的代码，主要是JS控件显示，还有一个重点是upload.aspx调用父级页面的方法这些实现。
Javascript无刷新上传演示地址:http://www.wathon.com/opensource/js/ajaxuploadv1/upload.html
源代码下载地址：http://www.wathon.com/opensource/js/ajaxuploadv1/ajaxupload_src.zip
无刷新上传在编辑框中的应用演示:http://www.cnblogs.com/Files/huacn/ajaxupload_example.zip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AjaxUpload</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<style type="text/css" media="all">
*{
margin:0;
padding:0;
}
img{border:none;}
ul{
list-style-type:none;
}
ul li{
padding:2px 4px;
}
body{
font-family: 宋体, 黑体,verdana, Arial;
font-size:12px;
color:#333;
background:#DDDDDD;
margin:30px;
padding:0;
}
.box{
border:1px solid #CCC;
background:#FFF;
padding:8px;
margin:5px;
clear:both;
}
.title {
background:#F0F0F0;padding:5px;
font-weight:bold;
}
.tooltip{
background:#F0F0F0;
border-color:#bbb;
}
.tooltip h1 {
color:#A8DF00;
font-family: 微软雅黑,黑体,宋体,verdana, Arial;
}
.titlebutton{
float:right;
}
.uploading{
background:#FFF;
color:#444;
text-align:left;
width:500px;
padding:4px;
}
.image{
border:1px solid #ddd;
margin:2px;
padding:1px;
display:inline;
width:300px;
}
.uploadcontrol {
margin:4px 0;
border-bottom:1px solid #F0F0F0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
for(var i=0;i<5;i++)
{
uploadcreate($("#uploadbox"),i);
}
});
var hideDiv = function(idName){
$("#"+idName).fadeOut("fast");
};
//是否显示上传后的图片
var isshowpic = true;
var uploadshowpic = function(el){
isshowpic = !(isshowpic);
if(isshowpic)
{
el.html("图片显示关闭");
}
else
{
el.html("图片显示开启");
}
};
//载入中的GIF动画
var loadingUrl = "images/ajax-loader.gif";
//选择文件后的事件,iframe里面调用的
var uploading = function(imgsrc,itemid){
var el = $("#uploading"+itemid);
$("#ifUpload"+itemid).fadeOut("fast");
el.fadeIn("fast");
el.html("<img src='"+loadingUrl+"' align='absmiddle' /> 上传中");
return el;
};
//重新上传方法
var uploadinit = function(itemid){
currentItemID ++;
$("#uploading"+itemid).fadeOut("fast",function(){
$("#ifUpload"+itemid).fadeIn("fast");
$("#panelViewPic"+itemid).fadeOut("fast");
});
};
//上传时程序发生错误时，给提示，并返回上传状态
var uploaderror = function(itemid){
alert("程序异常，"+itemid+"项上传未成功。");
uploadinit();
};
//上传成功后的处理
var uploadsuccess = function(newpath,itemid){
$("#uploading"+itemid).html("文件上传成功. <a href='javascript:void(0);' onclick='uploadinit("+itemid+");'>[重新上传]</a>");
if(isshowpic)
{
$("#panelViewPic"+itemid).html("<a href='"+newpath+"' title='点击查看大图' target='_blank'><img src='"+newpath+"' alt='' style='width:300px;' /></a>");
$("#panelViewPic"+itemid).fadeIn("fast");
}
};
var currentItemID = 0; //用于存放共有多少个上传控件了
//创建一个上传控件
var uploadcreate = function(el,itemid){
currentItemID ++;
if(itemid == null)
{
itemid = currentItemID;
}
var strContent = "<div class='uploadcontrol'><iframe src="upload.aspx?id="+itemid+"" id="ifUpload"+itemid+"" frameborder="no" scrolling="no" style="width:400px; height:28px;"></iframe>";
strContent += "<div class="uploading" id="uploading"+itemid+"" style="display:none;" ></div>";
strContent += "<div class="image" id="panelViewPic"+itemid+"" style="display:none;"></div></div>";
el.append(strContent);
};
</script>
</head>
<body>
<div id="tipbox" class="box tooltip">
<a href="#" onclick="hideDiv('tipbox');">[关闭]</a>
<div class="content">
<h1>AjaxUpload - 多文件无刷新上传源代码 v1.0</h1>
<p>作者:李华顺 <a href="http://huacn.cnblogs.com" target="_blank">http://huacn.cnblogs.com</a></p>
</div>
</div>
<div id="toolbox" class="tooltip box">
<a href="#" onclick="uploadcreate($('#uploadbox'));">添加一个新上传控件</a> <a href="#" onclick="uploadshowpic($(this));">图片显示关闭</a>
</div>
<div id="uploadbox" class="box">
</div>
</body>
</html>
上传功能的页面代码（upload.aspx）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<style type="text/css">
*{ margin:0; padding:0; }
</style>
<script type="text/javascript">
var uploadSelect = function(el){
el.fadeOut("show");
parent.uploading(document.getElementById("<%=file1.ClientID %>").value,'<%=itemID %>');
$("#<%=frmUpload.ClientID %>").submit();
};
</script>
</head>
<body>
<form runat="server" id="frmUpload" method="post" enctype="multipart/form-data">
<input type="file" runat="server" id="file1" size="40" onchange="uploadSelect($(this));" />
</form>
</body>
</html>
上传功能的服务端代码（upload.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;
using System.IO;
public partial class upload : System.Web.UI.Page
{
string picPath = "";
string picServer = "/upload";
protected string itemID = "";
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["id"] != null)
{
itemID = Request.QueryString["id"];
}
if (IsPostBack)
{
picPath = Server.MapPath("/upload");
doUpload();
}
}
protected void doUpload()
{
try
{
HttpPostedFile file = file1.PostedFile;
string strNewPath = GetSaveFilePath() + GetExtension(file.FileName);
file.SaveAs(picPath+strNewPath);
string urlPath = picServer + strNewPath;
urlPath = urlPath.Replace("/", "/");
WriteJs("parent.uploadsuccess('" + urlPath + "','" + itemID + "'); ");
}
catch (Exception ex)
{
WriteJs("parent.uploaderror();");
}
}
private string GetExtension(string fileName)
{
try
{
int startPos = fileName.LastIndexOf(".");
string ext = fileName.Substring(startPos, fileName.Length - startPos);
return ext;
}
catch (Exception ex)
{
WriteJs("parent.uploaderror('" + itemID + "');");
return string.Empty;
}
}
private string GetSaveFilePath()
{
try
{
DateTime dateTime = DateTime.Now;
string yearStr = dateTime.Year.ToString(); ;
string monthStr = dateTime.Month.ToString();
string dayStr = dateTime.Day.ToString();
string hourStr = dateTime.Hour.ToString();
string minuteStr = dateTime.Minute.ToString();
string dir = dateTime.ToString(@"/yyyyMMdd");
if (!Directory.Exists(picPath + dir))
{
Directory.CreateDirectory(picPath + dir);
}
return dir + dateTime.ToString("//yyyyMMddhhmmssffff");
}
catch (Exception ex)
{
WriteJs("parent.uploaderror();");
return string.Empty;
}
}
protected void WriteJs(string jsContent)
{
this.Page.RegisterStartupScript("writejs","<script type='text/javascript'>"+ jsContent+"</script>");
}
}
基本上就是这些，重点请看第一部份的代码，主要是JS控件显示，还有一个重点是upload.aspx调用父级页面的方法这些实现。
Javascript无刷新上传演示地址:http://www.wathon.com/opensource/js/ajaxuploadv1/upload.html
源代码下载地址：http://www.wathon.com/opensource/js/ajaxuploadv1/ajaxupload_src.zip
无刷新上传在编辑框中的应用演示:http://www.cnblogs.com/Files/huacn/ajaxupload_example.zip
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript与asp.net 实现Ajax多文件无刷新上传
- [荐]Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传
- GridView 72般绝技,Javascript与asp.net 实现Ajax多文件无刷新上传,在ASP.NET中执行URL重写经典方案
- Javascript与asp.net 实现Ajax多文件无刷新上传(转)
- ASP.Net+Ajax实现多文件无刷新上传
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）
- ASP.NET+Ajax+Javascript实现页面定次刷新滚动内容
- [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
- asp.net实现文件无刷新上传方法汇总
- asp.net javascript 文件无刷新上传实例代码
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)
- asp.net 用ajax实现文件上传
- Javascript与asp.net多文件无刷新上传
- Asp.net使用ajax无刷新上传文件（附源码）
- Asp.Net Mvc 使用jQuery实现Ajax文件上传
- 为ASP.NET MVC开发一些常用插件（二）—— 实现无刷新文件上传