asp文件上传带进度条
1. 急!ASP.NET+Ajax实现视频文件上传带进度条
我建议用flash的吧,现在有两个比较强大的,一个是swfupload另一个是uploadify,两者都是任何语言都可以使用的,提供了接口,两种我都用了,虽然刚开始研究有些吃力,但研究好了,你会发现,你的最终选择会是这两个,网上的垃圾确实很多。希望可以帮到你。
2. asp 如何实现带进度条的上传文件功能
以下就以abcupload4为例来说明怎么来制作实时的文件上传进度条。
(注:我们在abcupload自带例子基础上改进。)
progressupload.htm(上传文件的前台提交,我们让进度条在这个里面显示)
<HTML>
<body>
<script language="javascript">
<!--
theUniqueID = (new Date()).getTime() % 1000000000;
function s() //让数据提交的同时执行显示进度条的函数
{
bar(); //开始执行反映上传情况的函数
document.myform.action = "progressupload.ASP?ID=" theUniqueID; //处理上传数据的程序
document.myform.target="up" //将提交的数据放在一个名字是up隐藏的iframe里面处理,这样提交的页面就不会跳转到处理数据的页
document.myform.submit(); //提交表单
}
function bar()
{
bar1.style.display=''; //让显示上传进度显示的层的可见
var timeoutid=null; //这个变量是作定时器的ID
var oXMLDoc = new ActiveXObject('MSXML'); //创建'MSXML'对象
sURL = "progressbar.ASP?ID=" theUniqueID "&temp=" Math.random(); //获取上传状态数据的地址
oXMLDoc.url = sURL; //load数据
var oRoot=oXMLDoc.root; //获取返回XML数据的根节点
if(oRoot.children != null)
{
if (oRoot.children.item(0).text-100==0) //文件上传结束就取消定时器
clearTimeout(timeoutid)
PercentDone.style.width=oRoot.children.item(0).text "%"; //设置进度条的百分比例
//根据返回的数据在客户端显示
min.innerHTML=oRoot.children.item(1).text; //显示剩余时间(分钟)
secs.innerHTML=oRoot.children.item(2).text; //显示剩余时间(秒钟)
BytesDone.innerHTML=oRoot.children.item(3).text; //已上传数据大小
BytesTotal.innerHTML=oRoot.children.item(4).text; //总大小
BytesPerSecond.innerHTML=oRoot.children.item(5).text; //传输速率
Information.innerHTML=oRoot.children.item(6).text; //上传信息
}
if (oRoot.children.item(0).text-100<0) //只要文件没有传完,就每隔多少时间获取一次数据
timeoutid = setTimeout("bar()",50) //这里设定时间间隔是0.05秒,你也可以根据你的情况修改获取数据时间间隔
}
//-->
</script>
<form name="myform" method="post" action="progressupload.ASP" enctype="multipart/form-data" target=up>
<input type="file" name="filefield1"><br>
<input type="button" name="dosubmit" value="Upload" onclick="s()"><br>
<div id=bar1 style="display:none">
<table border="0" width="100%">
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>传送:</b></font></td>
</tr>
<tr bgcolor="#999999">
<td>
<table border="0" width="" cellspacing="1" bgcolor="#0033FF" id=PercentDone>
<tr>
<td><font size=1></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="100%">
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">剩余时间:</font></td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
<span id=min></span> 分
<span id=secs></span> 秒
(<span id=BytesDone></span> KB of
<span id=BytesTotal></span> KB 已上传)</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
传送速度:</font></td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
<span id=BytesPerSecond></span> KB/秒</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">信息:</font></td>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><span id=Information></span></font></td>
</tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</div>
<iframe name="up" style="display:none"></iframe>
</form>
</body>
</HTML>
progressbar.ASP(返回上传状况数据的文件)
<%@EnableSessionState=False%>
<%
On Error Resume Next
Set theProgress = Server.CreateObject("ABCUpload4.XProgress") '创建上传组件对象
theProgress.ID = Request.QueryString("ID")
'将返回数据以XML格式输出
%>
<?XML version="1.0" encoding="gb2312" ?>
<plan>
<PercentDone><%=theProgress.PercentDone%></PercentDone>
<min><%=Int(theProgress.SecondsLeft/60)%></min>
<secs><%=theProgress.SecondsLeft Mod 60%></secs>
<BytesDone><%=Round(theProgress.BytesDone / 1024, 1)%></BytesDone>
<BytesTotal><%=Round(theProgress.BytesTotal / 1024, 1)%></BytesTotal>
<BytesPerSecond><%=Round(theProgress.BytesPerSecond/1024, 1)%></BytesPerSecond>
<Information><%=theProgress.Note%></Information>
</plan>
progressupload.ASP(处理上传文件)
<%@EnableSessionState=False%>
<%
Response.Expires = -10000
Server.ScriptTimeOut = 300
Set theForm = Server.CreateObject("ABCUpload4.XForm")
theForm.Overwrite = True
theForm.MaxUploadSize = 8000000
theForm.ID = Request.QueryString("ID")
Set theField = theForm("filefield1")(1)
If theField.FileExists Then
theField.Save theField.FileName
End If
%>
<HTML>
<body>
传送结束
</body>
</HTML>
3. ajax多文件上传如何实现进度条
可以找一个上传插件,如:webupload。
上传插件可以配置显示上传进度,多文件上传可以同时显示多个文件的进度条。
如果自己写的话,需要考虑浏览器兼容和文件上传控制等。
4. 前端上传文件实时显示进度条和上传速度的工作原理是怎样的
xhr对象的upload.onprogress事件在上传过程中会多次回调
可以获取到当前上传的字节数、总字节数、时间戳等信息
根据上传字节数和总字节数计算上传百分比
根据时间戳可以判断两次progress事件间隔,再判断此期间内的上传字节数,做个除法就是上传速度
5. 电脑文件传输进度显示
文件上传进度显示的效果是:点击按钮,进度条和进度值显示相应的文件上传进度。
实现步骤如下(1) 添加布局和元素:
绿色的是一个层,层中加入的是“同步数据”元素。“选择文件”是在单行文本的基础上修改而成的。插入一个单行文本,”选择文件“下面添加的是从左侧”静态元素“中拖来的进度条。
(2) “同步数据”元素的设置在元素上右键选择“获取数据元素设置”,弹出对话框,在元素上右键选择“逻辑”→数据绑定→绑定模式:属性绑定→绑定参{"data--sync":update,"data-x-pg":pg}。
(3) 进度条的设置找到进度条的内侧 div(进度条有两层div),在内侧div上设置数据绑定,绑定参数:{"width":(pg() * 100).toFixed(2) +"%"},绑定变量初始化:{"pg":0}。toFixed(n)表示保留n位小数。在样式类文件中添加如下样式类.progress-bar { -webkit-transition: width 0s ; -o-transition: width 0s; transition: width 0s;}。
(4) 设置进度值在上传进度的数值上加上span标签。
(5) 按钮设置
同步按钮的逻辑设置如下:
高级编辑填入的代码为:_vm.update("true")。取消按钮的设置与同步按钮的设置大致相同,不同的是高级编辑填入的代码为:_vm.update("")。
文件的大小读取和数据读取在线程中,使用信号和槽发送到主进程,更新到ui控件上。
先在线程当中发送文件的大小到主进程,通过setRange设置进度条控件的范围,再按行读取并将每次按行读到数据大小发到主进程,通过setValue叠加设置当前进度条的值。
6. 文件上传时,进度条的设计原理是什么
而计算进度的原理,不就是已经传输的大小与总大小的比值嘛。 这样就简单了,就拿最基本的OutputStream来说,它的基本的写出方法为 void write(byte[] b) ,实际上写出的过程不就是通过InputStream循环读,然后OutputStream循环写嘛。 你只要事先通过File类取得文件的总大小,然后在读入或写出的循环里加一个简单的进度计算的步骤,每读取或写出一次,就将已传输大小增加b.length,求出比值,更新进度条。具体的计算间隔,可以根据循环次数或时间间隔来定。
7. asp上传图片原理(不要代码)只求论理
asp无组件上传的原理
一、无组件上传的原理
我还是一点一点用一个实例来说明的吧,客户端HTML如下。要浏览上传附件,我们通过<input type="file">元素,但是一定要注意必须设置form的enctype属性为"multipart/form-data":
<form method="post" action="upload.asp" enctype="multipart/form-data">
<label>
<input type="file" name="file1" />
</label>
<br />
<input type="text" name="filename" value="default filename"/>
<br />
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</form>
在后台asp程序中,以前获取表单提交的ASCII 数据,非常的容易。但是如果需要获取上传的文件,就必须使用Request对象的BinaryRead方法来读取。BinaryRead方法是对当前输入流进行指定字节数的二进制读取,有点需要注意的是,一旦使用BinaryRead 方法后,再也不能使用Request.Form 或 Request.QueryString 集合了。结合Request对象的TotalBytes属性,可以将所有表单提交的数据全部变成二进制,不过这些数据都是经过编码的。首先让我们来看看这些数据是如何编码的,有无什么规律可循,编段代码,在代码中我们将BinaryRead读取的二进制转化为文本,输出出来,在后台的upload.asp中(注意该示例不要上传大文件,否则可能会造成浏览器死掉):
<%
Dim biData, PostData
Size = Request.TotalBytes
biData = Request.BinaryRead(Size)
PostData = BinaryToString(biData,Size)
Response.Write "<pre>" & PostData & "</pre>" '使用pre,原样输出格式
' 借助RecordSet将二进制流转化成文本
Function BinaryToString(biData,Size)
Const adLongVarChar = 201
Set RS = createObject("ADODB.Recordset")
RS.Fields.Append "mBinary", adLongVarChar, Size
RS.Open
RS.AddNew
RS("mBinary").AppendChunk(biData)
RS.update
BinaryToString = RS("mBinary").Value
RS.Close
End Function
%>
简单起见,上传一个最简单的文本文件(G:\homepage.txt,内容为"宝玉:http://www.webuc.net")来试验一下,文本框filename中保留默认值"default filename",提交看看输出结果:
-----------------------------7d429871607fe
Content-Disposition: form-data; name="file1"; filename="G:\homepage.txt"
Content-Type: text/plain
宝玉:http://www.webuc.net
-----------------------------7d429871607fe
Content-Disposition: form-data; name="filename"
default filename
-----------------------------7d429871607fe--
可以看出来对于表单中的项目,是用过"-----------------------------7d429871607fe"这样的边界来分隔成一块一块的,每一块的开始都有一些描述信息,例如:Content-Disposition: form-data; name="filename",在描述信息中,通过name="filename"可以知道表单项的name。如果有filename="G:\homepage.txt"这样的内容,说明是一个上传的文件,如果是一个上传的文件,那么描述信息会多一行Content-Type: text/plain来描述文件的Content-Type。描述信息和主体信息之间是通过换行来分隔的。
嗯,基本上清晰了,根据这个规律我们就知道该怎么来分离数据,再对分离的数据进行处理了,不过差点忽略一个问题,就是边界值(上例中的"-----------------------------7d429871607fe")是怎么知道的?每次上传这个边界值是不一样的,还好还好asp中可以通过Request.ServerVariables( "HTTP_CONTENT_TYPE")来获之,例如上例中HTTP_CONTENT_TYPE内容为:"multipart/form-data; boundary=---------------------------7d429871607fe",有了这个,我们不仅可以判断客户端的form中有无使用enctype="multipart/form-data"(如果没有使用,那么下面就没必要执行啦),还可以获取边界值boundary=---------------------------7d429871607fe。(注意:这里获取的边界值比上面的边界值开头要少"--",最好补充上。)
至于如何分析数据的过程我就不多赘述了,无非就是借助InStr,Mid等这样的函数来分离出来我们想要的数据。
二、分块上传,记录进度
要实时反映进度条,实质就是要实时知道当前服务器获取了多少数据?再回想一下我们实现上传的过程,我们是通过Request.BinaryRead(Request.TotalBytes)来实现的,在Request的过程中我们无法得知当前服务器获取了多少数据。所以只能通过变通的方法了,如果我们可以将获取的数据分成一块一块的,然后根据已经上传的块数我们就可以算出来当前上传了多大了!也就是说,如果我1K为1块,那么上传1MB的输入流就分成1024块来获取,例如我当前已经获取了100块,那么就表明当前上传了100K。当我提出分块的时候很多人觉得不可思议,因为他们都忽略BinaryRead方法不仅是可以读取指定大小,而且可以连续读取的。
写个例子来验证一下分块读取的完整性,在刚才的例子基础上(注意该示例不要上传大文件,否则可能会造成浏览器死掉):
<%
Dim biData, PostData, TotalBytes, ChunkBytes
ChunkBytes = 1 * 1024 ' 分块大小为1K
TotalBytes = Request.TotalBytes ' 总大小
PostData = "" ' 转化为文本类型后的数据
ReadedBytes = 0 ' 初始化为0
' 分块读取
Do While ReadedBytes < TotalBytes
biData = Request.BinaryRead(ChunkBytes) ' 当前块
PostData = PostData & BinaryToString(biData,ChunkBytes) ' 将当前块转化为文本并拼接
ReadedBytes = ReadedBytes + ChunkBytes ' 记录已读大小
If ReadedBytes > TotalBytes Then ReadedBytes = TotalBytes
Loop
Response.Write "<pre>" & PostData & "</pre>" ' 使用pre,原样输出格式
' 将二进制流转化成文本
Function BinaryToString(biData,Size)
Const adLongVarChar = 201
Set RS = createObject("ADODB.Recordset")
RS.Fields.Append "mBinary", adLongVarChar, Size
RS.Open
RS.AddNew
RS("mBinary").AppendChunk(biData)
RS.update
BinaryToString = RS("mBinary").Value
RS.Close
End Function
%>
试验一下上传刚才的文本文件,输出结果证明这样分块读取的内容是完整的,并且在While循环中,我们可以在每次循环时将当前状态记录到Application中,然后我们就可以通过访问该Application动态获取上传进度条。
另:上例中是通过字符串拼接的,如果是要拼接二进制数据,可以通过ADODB.Stream对象的Write方法,示例代码如下:
Set bSourceData = createobject("ADODB.Stream")
bSourceData.Open
bSourceData.Type = 1 'Binary
Do While ReadedBytes < TotalBytes
biData = Request.BinaryRead(ChunkBytes)
bSourceData.Write biData ' 直接使用write方法将当前文件流写入bSourceData中
ReadedBytes = ReadedBytes + ChunkBytes
If ReadedBytes > TotalBytes Then ReadedBytes = TotalBytes
Application("ReadedBytes") = ReadedBytes
Loop
三、保存上传的文件
通过Request.BinaryRead获取提交数据,分离出上传文件后,根据数据类型的不同,保存方式也不同:
对于二进制数据,可以直接通过ADODB.Stream对象的SaveToFile方法,将二进制流保存成为文件。
对于文本数据,可以通过TextStream对象的Write方法,将文本数据保存到文件中。
对于文本数据和二进制数据,是可以方便的相互转换的,对于上传小文件来说,两者基本上没什么差别。但是两种方式保存时还是有一些差别的,对于ADODB.Stream对象,必须将所有数据全部装载完才可以保存成文件,所以使用这种方式如果上传大文件将很占用内存,而对于TextStream对象,可以在文件创建好后,一次Write一部分,分多次Write,这样的好处是不会占用服务器内存空间,结合上面分析的分块获取数据原理,我们可以每获取一块上传数据就将之Write到文件中。我曾做过试验,同样本机上传一个200多MB的文件,使用第一种方式内存一直在涨,到最后直接提示计算机虚拟内存不足,最可恨是即使进度条表示文件已经上传完,但是最终文件还是没有保存上。而使用后一种方法,上传过程中内存基本上无什么变化。
四、未解决的难题
我在博客园上看到Bestcomy描述他的Asp.Net上传组件是可以和Sever.SetTimeOut无关的,而在Asp中我是没能做到,对于上传大文件,就只有将Server.SetTimeOut设置为一个很大的值才可以。不知道有没有比较好的解决方法。
如果我们在保存文件时,使用TextStream对象的Write方法,那么如果用户上传时中断了文件传输,已经上传的那部分文件还是在的,如果可以断点续传就好了。关键问题是Request.BinaryRead方法虽然可以分块读取,但是却不能跳过某一段读取!
8. 前端上传文件实时显示进度条和上传速度的工作原理是怎样的
后端的责任。