`
isiqi
  • 浏览: 16497401 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Javascript与asp.net多文件无刷新上传 - Huacn的日志 - 博客园

阅读更多

Javascript与asp.net多文件无刷新上传

Javascript与asp.net 实现Ajax多文件无刷新上传


这几天在等着上班,闲来无事,就写了一个无刷新的上传功能,这个上传只是实现局部刷新,我已经把方法都整理好,可以随意添加多个上传控件,只要调用一个方法就可以了,为了便于阅读我没有把JS独立出来,以后真正用到项目上的时候再提出来,我在每个方法上面都写了注视,具体可以看代码部分,现在一直在用JQuery,它提供的方法太好用的,剩了很多事。
此方法主要是通过iFrame调用上传页的控件来实现的,具体请看下面的代码。

无刷新上传主要的HTML代码(upload.html):




AjaxUpload
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<style type="text/css" media="all"><br>*{<br> margin:0;<br> padding:0;<br>}<br>img{border:none;}<br>ul{<br> list-style-type:none;<br>}<br>ul li{<br> padding:2px 4px;<br>}<br>body{<br> font-family: 宋体, 黑体,verdana, Arial;<br> font-size:12px;<br> color:#333;<br> background:#DDDDDD;<br> margin:30px;<br> padding:0;<br>}<br>.box{<br> border:1px solid #CCC;<br> background:#FFF;<br> padding:8px;<br> margin:5px;<br> clear:both;<br>}<br>.title {<br> background:#F0F0F0;padding:5px;<br> font-weight:bold;<br>}<br>.tooltip{<br> background:#F0F0F0;<br> border-color:#bbb;<br>}<br>.tooltip h1 {<br> color:#A8DF00;<br> font-family: 微软雅黑,黑体,宋体,verdana, Arial;<br>}<br>.titlebutton{<br> float:right;<br>}<br>.uploading{<br> background:#FFF;<br> color:#444;<br> text-align:left;<br> width:500px;<br> padding:4px;<br>}<br>.image{<br> border:1px solid #ddd;<br> margin:2px;<br> padding:1px;<br> display:inline;<br> width:300px;<br>}<br>.uploadcontrol {<br> margin:4px 0;<br> border-bottom:1px solid #F0F0F0;<br>}<br></style>

$(document).ready(function(){
for(var i=0;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(" 上传中");
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("文件上传成功. [重新上传]");
if(isshowpic)
{
$("#panelViewPic"+itemid).html("");
$("#panelViewPic"+itemid).fadeIn("fast");
}
};
var currentItemID = 0; //用于存放共有多少个上传控件了
//创建一个上传控件
var uploadcreate = function(el,itemid){
currentItemID ++;
if(itemid == null)
{
itemid = currentItemID;
}
var strContent = "
<iframe src="%5C%22upload.aspx?id=%22+itemid+%22%5C%22" id='\"ifUpload"+itemid+"\"' frameborder='\"no\"' scrolling='\"no\"' style='\"width:400px;' height:28px></iframe>";
strContent += "
";
strContent += "
";
el.append(strContent);
};




[关闭]

AjaxUpload - 多文件无刷新上传源代码 v1.0


作者:李华顺 http://huacn.cnblogs.com








上传功能的页面代码(upload.aspx):





上传
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<style type="text/css"><br> *{ margin:0; padding:0; }<br></style>

var uploadSelect = function(el){
el.fadeOut("show");
parent.uploading(document.getElementById("").value,'');
$("#").submit();
};







上传功能的服务端代码(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",""+ jsContent+"");
}
}

基本上就是这些,重点请看第一部份的代码,主要是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多文件无刷新上传 - Huacn的日志 - 博客园

分享到:
评论

相关推荐

    下拉列表日期

    http://www.cnblogs.com/huacn/archive/2008/01/16/jquery_plugin_jSelectDate.html 更新记录: Version 0.2 - 2008-1-24 1.加入了闰年、大小月和二月天数的处理 2.新增一个Span标签的外框,以便于设置样式 3.新增...

    whys-app:为什么是开源 Quora 克隆

    为什么是开源 Quora 克隆。基于 Huacn Lee 的原始应用程序,这已适应英语观众。 可以在此处找到工作演示: :去做安装 redis 和 resque 以确保搜索正常工作创建日志模型IE错误修复设计邀请(当前导致冲突)

    数学建模拟合与插值.ppt

    数学建模拟合与插值.ppt

    [net毕业设计]ASP.NET教育报表管理系统-权限管理模块(源代码+论文).zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    mysql相关资源.txt

    mysql相关资源.txt

    利用HTML+CSS+JS的国漫分享网站(响应式)

    此项目为一个HTML+CSS+JS的国漫分享网站,用户可以在此网站中观看自己喜欢的国漫。此网站共有4个页面,分别为首页,最新动态,热门推荐,分类。页面动漫图片齐全,内容可更改。可用于期末课程设计或个人课程设计。

    Python爬虫爬取漫画

    Python爬虫爬取漫画

    C++语言编程用模拟退火算法解决旅行商问题

    模拟退火算法应用。C++语言编程用模拟退火算法解决旅行商问题。该资源包含模拟退火算法C++语言的源代码。模拟退火算法是一种基于概率的全局优化算法,最初来自于物理学中的退火过程。它通过模拟金属冷却时原子排列逐渐趋于最低能量状态的过程来寻找问题的最优解。模拟退火算法常用于解决非线性、组合优化问题,特别适合于大规模、复杂的搜索空间。

    传感器试题及答案.doc

    传感器试题及答案.doc

    [net毕业设计]ASP.NET网上书店(源代码+论文).zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    MongoDB数据表基本操作中文最新版本

    本文档主要讲述的是MongoDB数据表基本操作;希望对大家会有帮助;感兴趣的朋友可以过来看看

    1-全国各省废气、废水排放二氧化硫、氮氧化物、烟尘、颗粒物排放量统计数据2011-2021年-社科数据.zip

    本数据集提供了2011至2021年间全国各省废气和废水中主要污染物的排放量统计数据。数据涵盖了二氧化硫、氮氧化物、烟尘和颗粒物等关键污染物的排放量,为研究中国环境状况和污染物排放趋势提供了宝贵信息。数据显示,2011-2021年间,各省的二氧化硫排放量从数十万吨到数百万吨不等,其中广东、广西、海南等省份的排放量较高。氮氧化物排放量同样显示出地域差异,北京、天津等北方城市的排放量相对较低,而一些工业大省如河北、山西的排放量较高。颗粒物排放量统计显示,工业源和生活源是主要的排放源,其中工业源排放量占比较大。这些数据不仅对环保政策制定者具有参考价值,也为学术研究提供了实证基础。

    脉冲宽度测量单片机课程设计.doc

    脉冲宽度测量单片机课程设计.doc

    [net毕业设计]ASP.NET在线毕业论文提交系统的设计与实现(源代码+论文).zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    求职与招聘(源代码+论文+说明文档).zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    [net毕业设计]ASP.NET视频点播系统的设计与实现(源代码+论文).zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    全国矢量地图数据【国道+高速】-ArcGis Shape 格式数据集

    全国矢量地图数据【国道+高速公路】ArcGIS Shape格式数据集是一种专门用于地理信息系统(GIS)的矢量数据集,包含中国范围内国道和高速公路的详细路网信息。该数据集广泛应用于交通规划、导航、物流分析和灾害应急等领域,具有高精度和易用性。 数据集特点: 1. 数据内容: 国道:包括以“G”开头的国家级公路,如G1京哈高速、G107国道等。 高速公路:包括全国范围内的所有高速公路网,覆盖主要经济区、城市和边境口岸。 属性数据: 道路编号(国道或高速公路编号)。 道路名称。 道路等级(如一级、二级、快速路等)。 起点和终点坐标。 道路长度(单位:公里)。 相关属性(如路段建成年份、设计速度、车道数等)。 2. 数据格式: **Shapefile(.shp)**格式,支持主流GIS软件(如ArcGIS、QGIS)及数据处理工具(如Python、Matlab)。 3. 投影坐标系: 一般采用WGS84地理坐标系,或可根据需求转换为**GCJ-02(火星坐标系)**以配合国内导航应用。

    4.html

    4

    ASP网上作业提交系统(源代码+论文)(源代码+论文+说明文档).zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

    Oracle常用分析函数说明中文最新版本

    Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是对于每个组返回多行,而聚合函数对于每个组只返回一行。 感兴趣的朋友可以过来看看

Global site tag (gtag.js) - Google Analytics