如何实现csdn上传文件的效果，若能实现再加100分

Question

如图。
先谢谢各位啦！

Answer 1

上传预览 截图 网上有这样的flash控件 找一找

Answer 2

asp.net 下实现文件上传进度条（IHttpModule）
一般情况下，要实现上传进度条首先要实现上传文件分块读取，而默认情况下，iis将直接把上传的文件一次读入到内存中，所以本处的难点在于拦截iis的文件上传过程，转而自己的实现方式。所以，我们可以实现一个IHttpModule来处理上传过程。具体的过程是Application_BeginRequest下得到当前的HttpWorkRequest，然后通过这个对象来得到当前请求的类型，长度。具体方法请查看类的实现代码（该类来自于互联网）。由于在类中已经有比较完整的注释，所以我只介绍一个流程，没有涉及到具体的方法。
我们可以知道，如果我们取得了总的长度，那我们就可以设置一个固定的长度（比如1024字节），然后设置一个循环来每次读取这些数据，这样，我们就可以得到当前总共读取的内容长度。那页面上如何得到当前的进度呢？利用appliaction对象来存储数据，这样，前台的页面也可以使用application来得到当前的进度。因为application要使用一个键来确定是哪次的数据，常用的方法是，ihttpmodule中通过request来取得这次的键值，而上传文件也同样拥有这样一个键值。因此在upload.aspx中的page_load中需要：this.UploadID = this.Request["UploadID"];
        if (this.UploadID == null)
            this.Response.Redirect("~/user/uploadphotos.aspx?UploadID=" + Guid.NewGuid().ToString()+
                "&itemid="+this.itemid.ToString (), true);
如果第一次进入，就重新转发到这张页面，并给他一个uploadid，同时在HttpUploadModule中：string uploadId = app.Request.QueryString["UploadID"];//同步取得这个uploadid
那如何来实时读取这个数据并显示在页面中呢？我们可以在upload.aspx中使用xmlhttp去循环请求一个progress.aspx（这个页面来读取application中的数据）。当然，在asp.net中我们还可以使用asp.net ajax来实现这一过程，具体方法是：建立一个webservices来读取application中的数据；在ajax中来访问这个service；
如下webservices端代码：using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using adow.adup.bll;
namespace thmz.shire.services
{
    /// <summary>
    /// Uploadprogress 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.Web.Script.Services.ScriptService]
    public class Uploadprogress : System.Web.Services.WebService
    {        public Uploadprogress()
        {            //如果使用设计的组件，请取消注释以下行 
            //InitializeComponent(); 
        }        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod]
        public string Getprogess(string upid)
        {
            Progress progress = HttpUploadModule.GetProgress(upid, this.Application);
            string scriptText = "";
            if (progress != null)
            {
                if (progress.State == UploadState.ReceivingData)
                {
                    string length = (progress.ContentLength / 1024).ToString();
                    string read = (progress.BytesRead / 1024).ToString();
                    scriptText = String.Format("{0}:{1}", length, read);
                }
                else if (progress.State == UploadState.Complete)
                {
                    scriptText = "完成";
                }
                else
                {
                    scriptText = "出错";
                }
            }
            return scriptText;
        }    }
}
在upload.aspx中的services请求：<script language="javascript" type="text/javascript">
        function startprogress()
        {
            getprogress('<%=UploadID %>');
        }
        var uploadid="";
        var callindex=0;
        var div_process_out=$get('div_process_out');
        var div_process=$get('div_process');
        function uploadit()
        {
            if (uploadid=="")
                return;
            uploadrequest= thmz.shire.services.Uploadprogress.Getprogess(uploadid,up_complete,up_error);
        }
        function up_complete(result)
        {
            var sp_result=$get("sp_result");
            callindex++;
            if (result!=null)
            {
                  div_process_out.style.visibility='visible';
                        
                var valuecol=result.split(':');
                if (valuecol.length>=2)
                {
                    var length=valuecol[0];
                    var read=valuecol[1];
                    
                    var completeblocks=parseInt(parseFloat (read)/parseFloat(length) * 100);
                    sp_result.innerText=completeblocks+" %";
                    div_process.style.width=completeblocks+"%";
                }
                else
                {
                    sp_result.innerText=result;
                }
            }
        }
        function up_error(result)
        {
            var sp_result=$get("sp_result");
            sp_result.innerText="error occurs";
        }
        function getprogress(upid)
        {
            uploadid=upid;
            window.setInterval("uploadit()",400);
        }
    </script>
当然需要触发这个请求：<asp:Button ID="but_ok" runat="server" Text="上传" OnClientClick="startprogress()"/>  
还有在webconfig中启用我们的这个httpuploadmodule<httpModules>
      <!-- 分块上传模块-->
      <add name="HttpUploadModule" type="adow.adup.bll.HttpUploadModule, adow.adup.bll" />
</httpModules>为了能够上传大文件，我们还需要设置：<httpRuntime
     maxRequestLength="1000000"
     executionTimeout="300"
/>

Answer 3

期待更好的答案！
YnSky，先谢啦

Answer 4

以下就以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秒，你也可以根据你的情况修改获取数据时间间隔 } 

Answer 5

progressbar这个控件貌似可以实现简单的上传进度！

Answer 6

用HTTPMODULE实现进度条，很麻烦的，看看neatupload的源码吧。http://www.brettle.com

Answer 7

http://www.cnblogs.com/zengxiangzhan/archive/2010/01/14/1647866.html
下载