带进度条的文件上传控件使用小结

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

一、上传界面内容

选择文件:


   
选择文件:
   
 

说明:为了能正确显示,把原有asp.NET按钮控件换成了HTML的按钮控件

二、后台代码

       1.page_load部分内容

            private void Page_Load(object sender, System.EventArgs e)
             {
                      // 在此处放置用户代码以初始化页面
                      UpLoadHelper helper = new UpLoadHelper();   
                      helper.RegisterProgressBar(bt_save.UniqueID);
                      string path = Path.Combine(Server.MapPath("."),"loadfile");
                      if(!Directory.Exists(path))
                       {
                          Directory.CreateDirectory(path);
                      }
                       helper.UploadFolder = path;  
                      bind();
             }

     2.加入了自定义的显示上传文件夹的文件列表方法

           public void bind()
           {
                  string path = Path.Combine(Server.MapPath("."),"loadfile");
                  if(!Directory.Exists(path))
                   {
                         Directory.CreateDirectory(path);
                   }
                  Table1.Rows.Clear();
                  foreach(string filename in Directory.GetFiles(path))
                  {
                         TableRow r = new TableRow();
                         TableCell c = new TableCell();
                         c.Text = filename;
                         r.Cells.Add(c);
                        Table1.Rows.Add(r);
                }
          }

    3.批量上传文件的代码

     UpLoadHelper helper = new UpLoadHelper();
    
    string path = Path.Combine(Server.MapPath("."),"loadfile");
       
    foreach(UpLoadFile file in helper.GetUploadFileList("file1"))
    {
     file.SaveAs(Path.Combine(path,Path.GetFileName(file.FileName)));     
    }
    bind();

4.单个文件上传的代码

UpLoadHelper helper = new UpLoadHelper();
   
   string path = Path.Combine(Server.MapPath("."),"loadfile");
   UpLoadFile file = helper.GetUploadFile("s_file");
   file.SaveAs(Path.Combine(path,Path.GetFileName(file.FileName))); 
   bind(); 

三、说明

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例代码: HTML 文件: ```html <form id="upload-form" enctype="multipart/form-data"> <input type="file" name="file" id="file-input"> <input type="submit" value="上传" id="submit-btn"> </form> <div id="progress"> <div id="progress-bar"></div> </div> ``` JavaScript 代码: ```javascript $(document).ready(function() { // 当表单提交时 $('#upload-form').submit(function(event) { event.preventDefault(); // 获取要上传的文件 var file_data = $('#file-input').prop('files')[0]; // 创建一个 FormData 对象 var form_data = new FormData(); form_data.append('file', file_data); // 发送 Ajax 请求 $.ajax({ url: '/upload', type: 'POST', data: form_data, dataType: 'json', processData: false, contentType: false, xhr: function() { // 创建一个 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); // 监听上传进度 xhr.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { // 计算上传进度,更新进度条 var percent = Math.round((event.loaded / event.total) * 100); $('#progress-bar').css('width', percent + '%'); } }, false); return xhr; }, success: function(data) { // 上传成功,处理服务器返回的数据 console.log(data); }, error: function(xhr, status, error) { // 上传失败,处理错误信息 console.log(error); } }); }); }); ``` 上面这段代码使用 jQuery 发送 Ajax 请求,创建了一个 FormData 对象来存储要上传的文件,并且设置了一些参数: - `dataType: 'json'` 表示服务器返回的数据是 JSON 格式,jQuery 会自动解析 JSON 数据; - `processData: false` 表示不要对 FormData 对象进行处理,让浏览器处理文件上传; - `contentType: false` 表示不要设置 Content-Type 请求头,让浏览器自动设置; - `xhr: function() {...}` 表示使用 XMLHttpRequest 对象来发送 Ajax 请求,并且监听上传进度。 在监听上传进度的回调函数中,计算上传进度并更新进度条的宽度。最后处理上传成功和上传失败的情况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值