这几天在等着上班，闲来无事，就写了一个无刷新的上传功能，这个上传只是实现局部刷新，我已经把方法都整理好，可以随意添加多个上传控件，只要调用一个方法就可以了，为了便于阅读我没有把JS独立出来，以后真正用到项目上的时候再提出来，我在每个方法上面都写了注视，具体可以看代码部分，现在一直在用JQuery，它提供的方法太好用的，剩了很多事。
此方法主要是通过iFrame调用上传页的控件来实现的，具体请看下面的代码。
无刷新上传主要的HTML代码（upload.html）：
上传功能的页面代码（upload.aspx）：
上传功能的服务端代码（upload.aspx.cs）
基本上就是这些，重点请看第一部份的代码，主要是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
不好意思，能给我一份源码么，我用这上面的代码跑不出效果来。。
我的邮箱是 faweeky@gmail.com
谢谢了。。
此方法主要是通过iFrame调用上传页的控件来实现的，具体请看下面的代码。
无刷新上传主要的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);' οnclick='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 >
< 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);' οnclick='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 >
<! 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> " );
}
}
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
发表评论
2007-07-16 00:33 |
host [未注册用户]
welcome
2007-07-16 06:00 |
谢小漫 [未注册用户]
only for ie??
2007-07-16 06:14 |
谢小漫 [未注册用户]
fuck good
it can work in firefox 2.
thx
it can work in firefox 2.
thx
@布尔
我这个是做一个添加的演示，具体怎么发挥就看需要了
@谢小漫
这个是完全兼容Firefox和IE6的，IE7没有测试过，Firefox下面有动态效果
我这个是做一个添加的演示，具体怎么发挥就看需要了
@谢小漫
这个是完全兼容Firefox和IE6的，IE7没有测试过，Firefox下面有动态效果
2007-07-16 09:25 |
Mekk [未注册用户]
下载你的代码学习学习。
我现在使用微软的AJAX 1.0，不希望又加入其他AJAX类库，但是应该还是可以从你的代码学到不少东西吧。
使用AJAX1.0类库在客户端进行编程的教程似乎比较少，官方的又是英文，并且比较简单。
我现在使用微软的AJAX 1.0，不希望又加入其他AJAX类库，但是应该还是可以从你的代码学到不少东西吧。
使用AJAX1.0类库在客户端进行编程的教程似乎比较少，官方的又是英文，并且比较简单。
2007-07-16 09:42 |
ygl127 [未注册用户]
怎么上传不了
2007-07-16 09:53 |
土人 [未注册用户]
不错,好东西
2007-07-16 11:11 |
fantasisita [未注册用户]
谢谢楼主，不错
转自:http://www.cnblogs.com/huacn/archive/2007/07/16/ajax_upload_javascript_js_wushuaxing_jquery.html这...
[引用提示]WEBBER引用了该文章, 地址: http://www.cnblogs.com/yuewh491/archive/2007/07/16/819539.html
[引用提示]WEBBER引用了该文章, 地址: http://www.cnblogs.com/yuewh491/archive/2007/07/16/819539.html
2007-07-16 12:56 |
GOFI XIAO [未注册用户]
good,3ks
2007-07-16 13:43 |
moye [未注册用户]
陈芝麻了
2007-07-16 13:45 |
moye [未注册用户]
用那个Slick HttpUploadModule
还能实现 实时进度显示
基于上传ID号即可
一个SERVER端页面查询当前接管模块对应ID的进度
客户端AJAX与其交互
很简单的东西,不过多了个AJAX~
还能实现 实时进度显示
基于上传ID号即可
一个SERVER端页面查询当前接管模块对应ID的进度
客户端AJAX与其交互
很简单的东西,不过多了个AJAX~
2007-07-16 14:05 |
lost [未注册用户]
何必贴这么多代码，看着就乱
2007-07-16 20:55 |
西狐 [未注册用户]
非常好,谢谢.
@杨其仲
$是Jquery提供的一个方法，跟 document.getElementById一类似，不过Jquery给这个获取到的对像加了一些实用的方法
$是Jquery提供的一个方法，跟 document.getElementById一类似，不过Jquery给这个获取到的对像加了一些实用的方法
2007-07-17 10:37 |
wgmhx [未注册用户]
下载不了。能发一份吗？多谢！wgmhx@hotmail.com
2007-07-17 12:49 |
woo [未注册用户]
@wgmhx
能下载呀
能下载呀
前段时间,我也做了一个相似的控件,后来发现有些Bug不知道怎么解决.那个控件也就废弃了. 现在遇到了这个控件,让我眼睛一亮.太感谢李华顺.
2007-07-19 09:24 |
Compagnia Te [未注册用户]
先看一下。
2007-07-19 17:01 |
浪子 [未注册用户]
我怎么获取路径写进数据库啊，小弟刚刚。希望解答一下谢谢！！！
2007-07-20 16:48 |
浪子 [未注册用户]
还是没搞定。我做了的是个产品系统，还有很多字段的，不知道，怎么取到图片的路径，给我例子行吗？谢谢!!
@浪子
图片路径就是在 strNewPath 这里面的嘛
怎么存就是别的事情了呀!
就在上传的时候存就可以了，你是不是以为要返回的时候存呀。
存到数据库的方法请写到
protected void doUpload()
这个方法里面，写在
WriteJs("parent.uploadsuccess('" + urlPath + "','" + itemID + "'); ");
这句的前面，最好是开线程来存放。
如 doSaveToDatteBase(其它的内容,strNewPath)
图片路径就是在 strNewPath 这里面的嘛
怎么存就是别的事情了呀!
就在上传的时候存就可以了，你是不是以为要返回的时候存呀。
存到数据库的方法请写到
protected void doUpload()
这个方法里面，写在
WriteJs("parent.uploadsuccess('" + urlPath + "','" + itemID + "'); ");
这句的前面，最好是开线程来存放。
如 doSaveToDatteBase(其它的内容,strNewPath)
2007-07-29 23:09 |
Kenny [未注册用户]
不能下载,请发我一份谢谢!
Kenny_tian(at)tom.com
Kenny_tian(at)tom.com
2007-07-30 15:08 |
greki [未注册用户]
<input type="file" runat="server" id="file1" size="40" οnchange="uploadSelect($(this));" />
有些问题，如果手段任意输入，就会显示图片上传
有些问题，如果手段任意输入，就会显示图片上传
2007-07-30 15:37 |
greki [未注册用户]
onchange 函数里最好加 图片有效性判断。。。不才，只想说下自己想法，写得不好不要见怪
<head runat="server">
<title>无标题页</title>
<style >
img{
width:0px;
}
</style>
<script language ="javascript" type="text/javascript" >
var onError=false;
function Upload(ojb){
document .getElementById ('img').src=ojb.value;
if(!onError){
document.form1.submit ();
}
}
function ImageError(){
onError=true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="upd" runat="server" οnchange="Upload(this)" />
<img id="img" onerror ="ImageError()" />
</div>
</form>
</body>
</html>
<head runat="server">
<title>无标题页</title>
<style >
img{
width:0px;
}
</style>
<script language ="javascript" type="text/javascript" >
var onError=false;
function Upload(ojb){
document .getElementById ('img').src=ojb.value;
if(!onError){
document.form1.submit ();
}
}
function ImageError(){
onError=true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="upd" runat="server" οnchange="Upload(this)" />
<img id="img" onerror ="ImageError()" />
</div>
</form>
</body>
</html>
2007-07-30 19:34 |
天盖川 [未注册用户]
我把代码复制下来运行，好像有错。。
是在html文件的
最后 添加一个新上传控件 οnclick="uploadcreate($('#uploadbox'));">
这里。。
是在html文件的
最后 添加一个新上传控件 οnclick="uploadcreate($('#uploadbox'));">
这里。。
2007-07-30 19:36 |
天盖川 [未注册用户]
不好意思，能给我一份源码么，我用这上面的代码跑不出效果来。。
我的邮箱是 faweeky@gmail.com
谢谢了。。
2007-08-05 15:53 |
domybesttoday [未注册用户]
怎么都没看到你们用Ajax中的XMLHttp对象，我现在正想做一个用Ajax实时图片实时更新的Demo。
具体思路是：（不用Iframe技术）
客户端用FileUpload控件上传图片，发送异步请求xmlhttp.Open(“GET”，URL？imageData=Fileupload.filecontent，Ture).服务器接收请求，返回Response.responseStream。客户端再并无刷新的显示最新的四张图片，并将上传的一张最新图片存入数据库表中（不是在服务器的本地路径，数据库表中有有一个image类型的字段用来存放图片数据）。
遇到难题：
1、但我不知道怎么实现把Response.responseStream转化为2进制流加载到< img id=image1 src="..."/>中的src中
2、怎么把图片数据传送到服务器页面。让服务器页面用Reques.BinaryRead读取客户端传送过来的图片数据。
具体思路是：（不用Iframe技术）
客户端用FileUpload控件上传图片，发送异步请求xmlhttp.Open(“GET”，URL？imageData=Fileupload.filecontent，Ture).服务器接收请求，返回Response.responseStream。客户端再并无刷新的显示最新的四张图片，并将上传的一张最新图片存入数据库表中（不是在服务器的本地路径，数据库表中有有一个image类型的字段用来存放图片数据）。
遇到难题：
1、但我不知道怎么实现把Response.responseStream转化为2进制流加载到< img id=image1 src="..."/>中的src中
2、怎么把图片数据传送到服务器页面。让服务器页面用Reques.BinaryRead读取客户端传送过来的图片数据。
2007-08-06 20:44 |
domybesttoday [未注册用户]
有道理。。。。。
2007-08-09 16:08 |
Mason Young [未注册用户]
我想在.NET 1.1框架下面用，该怎么改。试着改了一下，好象不行。请赐教。
@Mason Young
你需要把 upload.aspx.cs 这个里面的东西重写一下，别的都可以复制，都是JS的HTML的CSS的，跟.NET版本无关
upload.aspx.cs 这个里面的东西也很少，就是接受上传保存文件，本来到了实际运用中就要把它重写一下的，这么简单地存文件怎么可以
你需要把 upload.aspx.cs 这个里面的东西重写一下，别的都可以复制，都是JS的HTML的CSS的，跟.NET版本无关
upload.aspx.cs 这个里面的东西也很少，就是接受上传保存文件，本来到了实际运用中就要把它重写一下的，这么简单地存文件怎么可以
2007-08-13 23:50 |
xueds [未注册用户]
下载后试了下，效果不错。想请教一下，我想在前台ASPX页面上做放一个HTML input file控件，我想用AJAX的方式，不回调而读入控件里的文件流，但是我没办法用后台的aspx.cs文件实现这样的想法，请问这个想法是不是根本就是错误的？
再，我怎样用最简单的方法，无回调的方式来实现前台 JS+后台 C#来读取要上传的文件流，我要把这个文件存储在数据库里。
能给我个案例吗?非常感谢 xueds@21cn.com
再，我怎样用最简单的方法，无回调的方式来实现前台 JS+后台 C#来读取要上传的文件流，我要把这个文件存储在数据库里。
能给我个案例吗?非常感谢 xueds@21cn.com
2007-08-13 23:57 |
xueds [未注册用户]
我是在
http://6.gzjoin.com的页面中使用。是母板页内的子页上，没有<head> <html>这些元素，怎样使用外部的JS文件？
有没有简洁的例子，我就是不明白无回调情况下，怎样让子页.aspx.cs文件来获取子页.aspx上的要上传的文件流，是用.net空间fileupload,还是html的input控件？请指教
有没有简洁的例子，我就是不明白无回调情况下，怎样让子页.aspx.cs文件来获取子页.aspx上的要上传的文件流，是用.net空间fileupload,还是html的input控件？请指教
@xueds
注意看
var uploadSelect = function(el){
el.fadeOut("show");
parent.uploading(document.getElementById("<%=file1.ClientID %>").value,'<%=itemID %>');
$("#<%=frmUpload.ClientID %>").submit();
};
这一段代码里面的
$("#<%=frmUpload.ClientID %>").submit();
"frmUpload"是一个Form，我这里是通过JS执行了subit的方法来提交表单，这样的话就提交到服务端上面去了。
上传控件我这里用的是HTML的Input控件，但把它设成服务端控件了的，用.NET的上传控件效果也是同样的。
我不明白，你上传页面为什么要用母版呢？
你仔细看一下，我这里是upload.aspx只是一个上传功能，说白了就是一个自定义的上传控件，我们真正看到的是upload.html这个文件，它是通过iframe来调用upload.aspx这个页面的。
注意看
var uploadSelect = function(el){
el.fadeOut("show");
parent.uploading(document.getElementById("<%=file1.ClientID %>").value,'<%=itemID %>');
$("#<%=frmUpload.ClientID %>").submit();
};
这一段代码里面的
$("#<%=frmUpload.ClientID %>").submit();
"frmUpload"是一个Form，我这里是通过JS执行了subit的方法来提交表单，这样的话就提交到服务端上面去了。
上传控件我这里用的是HTML的Input控件，但把它设成服务端控件了的，用.NET的上传控件效果也是同样的。
我不明白，你上传页面为什么要用母版呢？
你仔细看一下，我这里是upload.aspx只是一个上传功能，说白了就是一个自定义的上传控件，我们真正看到的是upload.html这个文件，它是通过iframe来调用upload.aspx这个页面的。
2007-08-14 14:11 |
xueds [未注册用户]
http://6.gzjoin.com,这里用母板和子页的方式，子页是真正的页面。因为asp.net不支持框架，用框架在studio2005里面编辑很不方便，所以用了母板。
上传控件是在子页上的。
我遇到的问题是，添加一个记录，其中有字段要保留排版内容样式，有些字段是图片格式。比如资讯，我解决的办法是先用DIV做的编辑器+AJAX方式把文字上传，获取记录ID号，然后再重定向到另外一个子页给该记录添加图片。文字上传子页前台用javascript,通过.net的后台实现ICallbackEventHandler接口，AJAX方式上传；上传图片子页用的是asp.net 的fileupload控件，是带回调的。
我想把文字和图片放在一个子页中上传至数据库，请问该怎么做?
如果后台能获取DIV中的录入文字也可以，整个页面一次回调就可以读取文字和图片，后台获取图片的文件流，修改尺寸，再按尺寸把它存入数据库中的不同字段中
如果用一个FORM ruanat=server来包含这些空间,但是系统只允许每个页面中运行一个服务端FORM，一个母板+子页的页面结构中，子页本身就嵌在一个服务端FORM中，再增加一个的时候，就会出错了。
你有QQ吗？或者加我QQ，31205
上传控件是在子页上的。
我遇到的问题是，添加一个记录，其中有字段要保留排版内容样式，有些字段是图片格式。比如资讯，我解决的办法是先用DIV做的编辑器+AJAX方式把文字上传，获取记录ID号，然后再重定向到另外一个子页给该记录添加图片。文字上传子页前台用javascript,通过.net的后台实现ICallbackEventHandler接口，AJAX方式上传；上传图片子页用的是asp.net 的fileupload控件，是带回调的。
我想把文字和图片放在一个子页中上传至数据库，请问该怎么做?
如果后台能获取DIV中的录入文字也可以，整个页面一次回调就可以读取文字和图片，后台获取图片的文件流，修改尺寸，再按尺寸把它存入数据库中的不同字段中
如果用一个FORM ruanat=server来包含这些空间,但是系统只允许每个页面中运行一个服务端FORM，一个母板+子页的页面结构中，子页本身就嵌在一个服务端FORM中，再增加一个的时候，就会出错了。
你有QQ吗？或者加我QQ，31205
2007-08-17 21:21 |
xueds [未注册用户]
Email已发
2007-08-23 17:03 |
sa [未注册用户]
源码荡不下来，能不能给发一份。xyj_321227@126.com
2007-08-28 11:31 |
xpengfee [未注册用户]
下载了你的示例代码，为什么总是上传不上去啊？
2007-08-28 13:40 |
xpengfee [未注册用户]
谢谢，找到问题所在了——我是直接在VS里右击浏览所以不好用
2007-09-09 14:35 |
fengzi8834760 [未注册用户]
您的上传控件在我本地电脑上运行正常，但上传到网站空间就有问题，是不是空间上的设置问题，还是有其他的原因，能否告知，谢谢lyfnan_8@163.com
2007-09-17 18:47 |
浪子阿布 [未注册用户]
不能否认，你真的很强！
2007-09-18 17:24 |
呀呀 [未注册用户]
我有个问题，请高手指教
我做的浏览图片，点击某个图片之后，下面image控件显示张大图片
但是每次都要刷新，我想要个无刷新的
我不知道怎么解决
请您帮个忙
我做的浏览图片，点击某个图片之后，下面image控件显示张大图片
但是每次都要刷新，我想要个无刷新的
我不知道怎么解决
请您帮个忙
2007-09-24 18:07 |
呀呀 [未注册用户]
最近又在忙 java
图片问题还没有解决，
先谢谢你了 ！
图片问题还没有解决，
先谢谢你了 ！
2007-09-30 14:44 |
omeweb [未注册用户]
恩，思路是一样的，我没有使用JQ,也是这个思路做的，效果还不错，就是进度条问题还没有加上去，希望多交流
2007-10-12 17:19 |
allan [未注册用户]
有没有下载整个文件夹的代码，下载单个文件会，可是整个就有点困难了，不好意思！
2007-10-30 14:42 |
MOO [未注册用户]
请问怎么给上传的文件限定格式和大小呢？
比如第一个只能上传RAR或者ZIP格式的文件，第二 第三个只能上传JPG或GIF格式的文件呢？
比如第一个只能上传RAR或者ZIP格式的文件，第二 第三个只能上传JPG或GIF格式的文件呢？
2007-10-31 08:29 |
MOO [未注册用户]
我不会.NET 客户端JS判断的好像很不安全啊。。看你写的代码这么工整绝对是个高手 能不能在客户端加个判断呢。
@MOO
最好是在服务端做验证了，这样处理也方便也些，文件大小只要在upload.aspx.cs的doUpload方法里面判断一下 HttpPostedFile file = file1.PostedFile; 这个fire的size就可以了
扩展名嘛，就用file1.FileName，再用GetExtension()这个方法就可以取到
最好是在服务端做验证了，这样处理也方便也些，文件大小只要在upload.aspx.cs的doUpload方法里面判断一下 HttpPostedFile file = file1.PostedFile; 这个fire的size就可以了
扩展名嘛，就用file1.FileName，再用GetExtension()这个方法就可以取到
2007-11-08 11:04 |
丹心猪(Dansinge)
mark
2007-12-11 16:18 |
龙城 [未注册用户]
华顺大哥你好!你这个程序我下载用了一下感觉非常不错，只是有个地方搞不明白，在上传没有后缀文件名的文件时候，会弹出错误提示，当点击确定后应该重新载入上传，但是不知道什么原因，就是 载入不了，直接灸显示动画哪里，请华顺大哥帮忙解决一下，我是个初学者，谢谢！（哦对了您的演示程序也有是这个样子）
@龙城
没扩展名的错误提示是因为在服务端的时候会取文件的扩展名的，所有会有错误，还好你提醒了我，我的项目里面都得修改一下。这个具体修改可以看一下
GetExtension方法，在这里做一些相应的处理
错了没有返回上传框状态的是
//重新上传方法
var uploadinit = function(itemid){
currentItemID ++;
$("#uploading"+itemid).fadeOut("fast",function(){
$("#ifUpload"+itemid).fadeIn("fast");
$("#panelViewPic"+itemid).fadeOut("fast");
});
};
这一段JS的BUG，请将 currentItemID ++;去掉，也就是改成这样：
//重新上传方法
var uploadinit = function(itemid){
$("#uploading"+itemid).fadeOut("fast",function(){
$("#ifUpload"+itemid).fadeIn("fast");
$("#panelViewPic"+itemid).fadeOut("fast");
});
};
没扩展名的错误提示是因为在服务端的时候会取文件的扩展名的，所有会有错误，还好你提醒了我，我的项目里面都得修改一下。这个具体修改可以看一下
GetExtension方法，在这里做一些相应的处理
错了没有返回上传框状态的是
//重新上传方法
var uploadinit = function(itemid){
currentItemID ++;
$("#uploading"+itemid).fadeOut("fast",function(){
$("#ifUpload"+itemid).fadeIn("fast");
$("#panelViewPic"+itemid).fadeOut("fast");
});
};
这一段JS的BUG，请将 currentItemID ++;去掉，也就是改成这样：
//重新上传方法
var uploadinit = function(itemid){
$("#uploading"+itemid).fadeOut("fast",function(){
$("#ifUpload"+itemid).fadeIn("fast");
$("#panelViewPic"+itemid).fadeOut("fast");
});
};
2007-12-11 17:21 |
(心)Shing Ye
@李华顺
这个我已帮你解决了,很简单的修改,呵呵:
//上传时程序发生错误时，给提示，并返回上传状态
var uploaderror = function(itemid){
alert("程序异常，"+itemid+"项上传未成功。");
uploadinit(itemid);//此处重新上传....
};
听龙城说这样可以了,,但是可能不是很完美,,等待李大哥修改看看,另外,这是我的msn:shing13580540470@hotmail.com,,,到时候交流交流,我也写了个无刷新多附件上传,但是使用了jquery的插件...
这个我已帮你解决了,很简单的修改,呵呵:
//上传时程序发生错误时，给提示，并返回上传状态
var uploaderror = function(itemid){
alert("程序异常，"+itemid+"项上传未成功。");
uploadinit(itemid);//此处重新上传....
};
听龙城说这样可以了,,但是可能不是很完美,,等待李大哥修改看看,另外,这是我的msn:shing13580540470@hotmail.com,,,到时候交流交流,我也写了个无刷新多附件上传,但是使用了jquery的插件...
2007-12-12 07:02 |
龙城 [未注册用户]
华顺大哥，有点问题请帮帮忙。
我想在上传完图片之后不卸载upload.aspx 直接把那个文件框的Enabled = false，然后按重新上传的时候再让文件的Enabled = true。现在我可以让它不卸载了可是重新上传的时候怎么才能让文件的Enabled = true呢?
还有,当点击重新上传之后,之前上传的图片应该在服务器上物理删除怎么办到呢?
在调用upload.aspx的父页面上用什么方法能把传上来的图片的路径和文件名保存在一个变量里等提交表单的时候一起存入数据库。
还有在不提交表单的情况下但是图片已经上传,产生的垃圾图片应该怎么样处理呢? 问题有点多。没办法我很菜 ，已经两个通宵了，还是没有完全搞完这个上传部分！还请华顺大哥辛苦一下 给我点提示，麻烦了！
我想在上传完图片之后不卸载upload.aspx 直接把那个文件框的Enabled = false，然后按重新上传的时候再让文件的Enabled = true。现在我可以让它不卸载了可是重新上传的时候怎么才能让文件的Enabled = true呢?
还有,当点击重新上传之后,之前上传的图片应该在服务器上物理删除怎么办到呢?
在调用upload.aspx的父页面上用什么方法能把传上来的图片的路径和文件名保存在一个变量里等提交表单的时候一起存入数据库。
还有在不提交表单的情况下但是图片已经上传,产生的垃圾图片应该怎么样处理呢? 问题有点多。没办法我很菜 ，已经两个通宵了，还是没有完全搞完这个上传部分！还请华顺大哥辛苦一下 给我点提示，麻烦了！
1.好像 input type=file 的没法设为不可用，上次我试了一下不行，所以后面就想办法直接把它隐藏掉了。
2.为什么重新上传时要删除上一张图片呢？如果你非要的话，哪就在“重新上传”这个事件里面加入一个Ajax的调用，再传到服务端执行删除，当然这里每次的文件需要一个唯一的标识（如数据库里面的ID）。
3.其实我这里的例子没有写存到数据库的哪一段，后面新的文章里面我将会提到，主要方式就是上传的时候就存到数据库，但从意义上来看，它只是一个零时的。到最后点击保存时再将这条记录改为正常的。哪两个页面之间就只用传递一个ID就可以了。
4.这个问题嘛，我这里是因为大型网站上应用的，没必要每次取消都去删哪些图片，只用过一段时间通过程序去找出没有用到的图片，再咔嚓掉就行了
2.为什么重新上传时要删除上一张图片呢？如果你非要的话，哪就在“重新上传”这个事件里面加入一个Ajax的调用，再传到服务端执行删除，当然这里每次的文件需要一个唯一的标识（如数据库里面的ID）。
3.其实我这里的例子没有写存到数据库的哪一段，后面新的文章里面我将会提到，主要方式就是上传的时候就存到数据库，但从意义上来看，它只是一个零时的。到最后点击保存时再将这条记录改为正常的。哪两个页面之间就只用传递一个ID就可以了。
4.这个问题嘛，我这里是因为大型网站上应用的，没必要每次取消都去删哪些图片，只用过一段时间通过程序去找出没有用到的图片，再咔嚓掉就行了
2007-12-12 15:45 |
龙城 [未注册用户]
我用的是这个控件 <asp:FileUpload ID="file1" 这个是有 Enabled的现在的问题就是在父页面怎么才能让iframe里的FileUpload控件的Enabled=true；这个是我的页面麻烦您教一下我谢谢！http：//max168.cn/TypeJz_User_Add.aspx
--引用--------------------------------------------------
jiangxin: 创建一个上传控件有关下面的函吗?
el.append(strContent);
如果是减少一个呢
el.什么?
--------------------------------------------------------
$("#ifUpload"+itemid).remove();
jiangxin: 创建一个上传控件有关下面的函吗?
el.append(strContent);
如果是减少一个呢
el.什么?
--------------------------------------------------------
$("#ifUpload"+itemid).remove();
2008-01-16 13:36 |
ithurricane
正需要这个，多谢了
4536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
