大文件上传,并显示进度条(续)

经过一天的研究, 文件上传总共需要如上几个文件

1. uploadFile.aspx上只是有一个file HTML控件, 后台代码只是初始化上传文件目录
    UploadContext context = UploadContextFactory.InitUploadContext(this, "/files");
   它引用了jquery form,blockUI,progressBar等插件,还包含了uploadfile.js
   
2. uploadfile.js是获取进度条的一些操作(主要就是这个JS来操作)
   
   1. $(function()
   2. {
   3.     var info = '<div style="display:none" id="uploadinfo">';
   4.     info += '<p>正在上传: <span id="uploadfilename"></span>; 状态: <span id="uploadtitle"></span>;</p>';
   5.     info += '<p>上传速度: <span id="uploadrate"></span>;预计剩余时间: <span id="uploadlefttime"></span></p>';
   6.     info += '<p>上传文件大小: <span id="uploadtotal"></span>;已上传大小: <span id="uploadcurrent"></span></p>';
   7.     info += '<div  id="uploadprogressbar"></div>';
   8.     info += '</div>';
   9. 
      
   10.     $("body").append(info);
   11.     //进度条
   12.     $("#uploadprogressbar").progressbar();
   13.     //上传
   14.     $('#fileupload').MultiFile(
   15.     {
   16.        STRING: 
   17.        { 
   18.         remove:'移除', 
   19.         selected:'选择了: $file', 
   20.         denied:'不能使用 $ext 类文件!' 
   21.        } 
   22.    }
   23.     );      
   24.    
   25. });
   26. 
       
   27. //上传提交
   28. function upload()
   29. {
   30.         $("#uploadForm").ajaxSubmit(
   31.         {
   32.             url: "uploadfile_process.aspx?guid=" + $("#UploadID").val(),
       
   33.             dataType:  'text', 
   34.             beforeSubmit: function(a,f,o) 
   35.             {
   36.                 startProgress();
   37.             },
   38.             async:false,
   39.             clearForm:true,
   40.             resetForm:true,
   41.             success: function(data) 
   42.             {
   43.                 //成功后刷新页面,获取新的uploadid
   44.             },
   45.             error:function(err)
   46.             {
   47.                 alert($(err).html());
   48.             }
   49.         });
   50. }
   51. 
       
   52. function getProgress(){
   53.     $.ajax({
   54.        type: "post",
   55.        dataType:"json",
   56.        url: "uploadProgress.aspx", //获取进度条
       
   57.        data: "UploadID=" + $("#UploadID").val(),
   58.        success: function(data){
   59.             
   60.             $("#uploadprogressbar").progressbar("progress", data.percent);
   61.             $("#uploadfilename").html(data.filename);
   62.             $("#uploadrate").html(data.rate);
   63.             $("#uploadtitle").html(data.info);
   64.             $("#uploadlefttime").html(data.lefttime);
   65.             $("#uploadtotal").html(data.total);
   66.             $("#uploadcurrent").html(data.current);
   67. 
       
   68.             if(data.succ==-1){
   69.                 alert(data.info);
   70.             }         
   71.             if (data.succ==0){
   72.                 setTimeout("getProgress()", 1000);
   73.             }
   74.             if (data.succ==1){
   75.                 stopProgress();
   76.                 return;
   77.             }           
   78.             
   79.        },
   80.        error:function(msg)
   81.        {
   82.             alert($(msg).html());
   83.        }
   84.     });   
   85.             
   86. }
   87. 
       
   88. function startProgress(){
   89.     $.blockUI({message:$("#uploadinfo")});
   90.     setTimeout("getProgress()", 500);
   91. }
   92. function stopProgress()
   93. {
   94.     $.unblockUI(); 
   95. }
3. uploadfile_process.aspx是对上传后的文件进行处理
   
4. uploadProgress.aspx 获取进度条
   
   1.         try
   2.         {
   3. 
      
   4.             string s = "{";
   5. //返回一个JSON数组,通过uploadID来获取上传的进程   
      
   6.             UploadContext upload = UploadContextFactory.GetUploadContext(Request["UploadID"]);
   7.             
   8.             //初始化
   9.             if (upload.Status == uploadStatus.Initializing)
   10.             {
   11.                 s += responeJSON(upload, "0", "");
   12.             }
   13. 
       
   14.             if (upload.Status == uploadStatus.Uploading)
   15.             {
   16.                 s += responeJSON(upload, "0", "");
   17.             }
   18. 
       
   19.             if (upload.Status == uploadStatus.Complete)
   20.             {
   21.                 s += responeJSON(upload, "1", "");
   22.             }
   23. 
       
   24.             if (upload.Status == uploadStatus.HasError)
   25.             {
   26.                 s += responeJSON(upload, "-1", "");
   27.             }
   28.             s += "}";
   29. 
       
   30.             Response.Write(s);
   31.         }
   32.         catch (Exception err)
   33.         {
   34.             //throw err;
   35.             Response.Write("{'info':'" + err.Message.Replace("'", "") + "','succ':-1}");
   36.         }
   37.         
   38.     }
   39. 
       
   40.     private string responeJSON(UploadContext upload, string succ,string errmsg)
   41.     {
   42.         string s = "";
   43.         s += "'info':'" + upload.FormatStatus + "'" ;
   44.         s += ",'percent':'" + Convert.ToInt32((upload.Readedlength * 100.0 / upload.TotalLength)).ToString() + "'";
   45.         s += ",'current':'" + (upload.Readedlength/1024).ToString() + "KB'";
   46.         s += ",'total':'" + (upload.TotalLength/1024).ToString() + "KB'";
   47.         s += ",'rate':'" + upload.FormatRatio + "'";
   48.         s += ",'filename':'" + upload.CurrentFile + "'";
   49.         s += ",'cancel_upload':" + 0 ;
   50.         s += ",'lefttime':'" + upload.LeftTime + "'";
   51.         s += ",'succ':" + succ;
   52.         s += ",'errmsg':'"  + errmsg  +"'";
   53. 
       
   54.         return s;
   55.     }
   运行后效果如下:
5. 
6. 总结:
   在你需要上传的页面用包含一个uploadFile.aspx页面,如下
   <iframe id="iUpload" src="../../common/ajax/uploadfile/uploadFile.aspx" frameborder="0" width="100%" height="300"></iframe>
   然后在这个页面放一个按钮,该按钮事件调用uploadfile.aspx中js文件uploadfile.js中upload()事件
   
   
   1.         $(function()
   2.         {
   3.             $("#img_submit").click(function()
   4.             {
   5.                var v= document.getElementById("iUpload").contentWindow;
   6.                v.upload();
   7.             });
   8.            
   9.         });
   我的上传页面.aspx 包含 uploadfile.aspx 调用 uploadprogress.aspx?guid=xxxx来显示进度,并上传完成后 调用 uploadfile_process.aspx?guid=xxxx,来获取上传的文件ID等信息,作下一步处理(如写到数据库)