利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层


Posted in Javascript onMarch 15, 2017

大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要么很麻烦,比如改配置,要么不稳定,比如文件上G以后,上传要么死掉,要么卡住,通过设置web.config并不能很好的解决这些问题。

这是一个Html5统治浏览器的时代,在这个新的时代,这种问题已被简化并解决,我们可以利用Html5分片上传的技术,那么Plupload则是一个对此技术进行封装的前端脚本库,这个库的好处是可以自动检测浏览器是否支持html5技术,不支持再检测是否支持flash技术,甚至是sliverlight技术,如果支持,就使用检测到的技术。

那么这个库到哪里下载,怎么搭建呢,比较懒的童鞋还是用Install-Package Plupload搞定吧,一个命令搞定所有事

下面给出一个例子,使用自已定义的控件来使用Plupload (Plupload也有自己的界面可以用),如下

利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

Plupload支持的功能这里就不细说了,什么批量上传,这里我没有用到,主要是感觉它支持的事件非常丰富,文件选取后的事件,文件上传中的事件(可获得文件的上传进度),文件上传成功的事件,文件上传失败的事件,等等

我的例子主要是上传一个单个文件,并显示上传的进度条(使用jQuery的一个进度条插件)

下面的例子主要是为文件上传交给 UploadCoursePackage.ashx 来处理

/******************************************************ProgressBar********************************************************/
      var progressBar = $("#loading").progressbar({ width: '500px', color: '#B3240E', border: '1px solid #000000' });
      /******************************************************Plupload***********************************************************/
      //实例化一个plupload上传对象
      var uploader = new plupload.Uploader({
        browse_button: 'browse', //触发文件选择对话框的按钮,为那个元素id
        runtimes: 'html5,flash,silverlight,html4',//兼容的上传方式
        url: "Handlers/UploadCoursePackage.ashx", //后端交互处理地址
        max_retries: 3,   //允许重试次数
        chunk_size: '10mb', //分块大小
        rename: true, //重命名
        dragdrop: false, //允许拖拽文件进行上传
        unique_names: true, //文件名称唯一性

        filters: { //过滤器
          max_file_size: '999999999mb', //文件最大尺寸
          mime_types: [ //允许上传的文件类型
            { title: "Zip", extensions: "zip" },
            { title: "PE", extensions: "pe" }
          ]
        },
        //自定义参数 (键值对形式) 此处可以定义参数
        multipart_params: {
          type: "misoft"
        },
        // FLASH的配置
        flash_swf_url: "../Scripts/plupload/Moxie.swf",

        // Silverligh的配置
        silverlight_xap_url: "../Scripts/plupload/Moxie.xap",

        multi_selection: false //true:ctrl多文件上传, false 单文件上传 
      });

      //在实例对象上调用init()方法进行初始化
      uploader.init();

      uploader.bind('FilesAdded', function (uploader, files) {
        $("#<%=fileSource.ClientID %>").val(files[0].name);
        $.ajax(
        {
          type: 'post',
          url: 'HardDiskSpace.aspx/GetHardDiskFreeSpace',
          data: {},
          dataType: 'json',
          contentType: 'application/json;charset=utf-8',
          success: function (result) {
            //选择文件以后检测服务器剩余磁盘空间是否够用
            if (files.length > 0) {
              if (parseInt(files[0].size) > parseInt(result.d)) {
                $('#error-msg').text("文件容量大于剩余磁盘空间,请联系管理员!");
              } else {
                $('#error-msg').text("");
              }
            }
          },
          error: function(xhr, err, obj) {
            $('#error-msg').text("检测服务器剩余磁盘空间失败");
          }
        });
      });

      uploader.bind('UploadProgress', function (uploader, file) {
        var percent = file.percent;
        progressBar.progress(percent);
      });

      uploader.bind('FileUploaded', function (up, file, callBack) {
        var data = $.parseJSON(callBack.response);
        if (data.statusCode === "1") {
          $("#<%=hfPackagePath.ClientID %>").val(data.filePath);
          var id = $("#<%=hfCourseID.ClientID %>").val();
          __doPostBack("save", id);
        } else {
          hideLoading();
          $('#error-msg').text(data.message);
        }
      });

      uploader.bind('Error', function (up, err) {
        alert("文件上传失败,错误信息: " + err.message);
      });

后台 UploadCoursePackage.ashx 的代码也重要,主要是文件分片跟不分片的处理方式不一样

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace WebUI.Handlers
{
  /// <summary>
  /// UploadCoursePackage 的摘要说明
  /// </summary>
  public class UploadCoursePackage : IHttpHandler
  {

    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";

      int statuscode = 1;
      string message = string.Empty;
      string filepath = string.Empty;

      if (context.Request.Files.Count > 0)
      {
        try
        {
          string resourceDirectoryName = System.Configuration.ConfigurationManager.AppSettings["resourceDirectory"];
          string path = context.Server.MapPath("~/" + resourceDirectoryName);
          if (!Directory.Exists(path))
            Directory.CreateDirectory(path);

          int chunk = context.Request.Params["chunk"] != null ? int.Parse(context.Request.Params["chunk"]) : 0; //获取当前的块ID,如果不是分块上传的。chunk则为0
          string fileName = context.Request.Params["name"]; //这里写的比较潦草。判断文件名是否为空。
          string type = context.Request.Params["type"]; //在前面JS中不是定义了自定义参数multipart_params的值么。其中有个值是type:"misoft",此处就可以获取到这个值了。获取到的type="misoft";

          string ext = Path.GetExtension(fileName);
          //fileName = string.Format("{0}{1}", Guid.NewGuid().ToString(), ext);
          filepath = resourceDirectoryName + "/" + fileName;
          fileName = Path.Combine(path, fileName);

          //对文件流进行存储 需要注意的是 files目录必须存在(此处可以做个判断) 根据上面的chunk来判断是块上传还是普通上传 上传方式不一样 ,导致的保存方式也会不一样
          FileStream fs = new FileStream(fileName, chunk == 0 ? FileMode.OpenOrCreate : FileMode.Append);
          //write our input stream to a buffer
          Byte[] buffer = null;
          if (context.Request.ContentType == "application/octet-stream" && context.Request.ContentLength > 0)
          {
            buffer = new Byte[context.Request.InputStream.Length];
            context.Request.InputStream.Read(buffer, 0, buffer.Length);
          }
          else if (context.Request.ContentType.Contains("multipart/form-data") && context.Request.Files.Count > 0 && context.Request.Files[0].ContentLength > 0)
          {
            buffer = new Byte[context.Request.Files[0].InputStream.Length];
            context.Request.Files[0].InputStream.Read(buffer, 0, buffer.Length);
          }

          //write the buffer to a file.
          if (buffer != null)
            fs.Write(buffer, 0, buffer.Length);
          fs.Close();

          statuscode = 1;
          message = "上传成功";

        }
        catch (Exception ex)
        {
          statuscode = -1001;
          message = "保存时发生错误,请确保文件有效且格式正确";

          Util.LogHelper logger = new Util.LogHelper();
          string path = context.Server.MapPath("~/Logs");
          logger.WriteLog(ex.Message, path);
        }
      }
      else
      {
        statuscode = -404;
        message = "上传失败,未接收到资源文件";
      }

      string msg = "{\"statusCode\":\"" + statuscode + "\",\"message\":\"" + message + "\",\"filePath\":\"" + filepath + "\"}";
      context.Response.Write(msg);
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

再附送一个检测服务器端硬盘剩余空间的功能吧

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebUI
{
  public partial class CheckHardDiskFreeSpace : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    /// <summary>
    /// 获取磁盘剩余容量
    /// </summary>
    /// <returns></returns>
    [WebMethod]
    public static string GetHardDiskFreeSpace()
    {
      const string strHardDiskName = @"F:\";

      var freeSpace = string.Empty;
      var drives = DriveInfo.GetDrives();
      var myDrive = (from drive in drives
        where drive.Name == strHardDiskName
        select drive).FirstOrDefault();
      if (myDrive != null)
      {
        freeSpace = myDrive.TotalFreeSpace+""; 
      }
      return freeSpace;
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
js获取页面description的方法
May 21 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 #Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 #Javascript
js实现自定义进度条效果
Mar 15 #Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 #Javascript
jQuery模拟窗口抖动效果
Mar 15 #Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 #Javascript
基于React实现表单数据的添加和删除详解
Mar 14 #Javascript
You might like
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
简单了解django orm中介模型
2019/07/30 Python
用Python解数独的方法示例
2019/10/24 Python
python实现简单学生信息管理系统
2020/04/09 Python
python实现人像动漫化的示例代码
2020/05/17 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
美的官方商城:Midea
2016/09/14 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
秋季运动会稿件
2014/01/30 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
七个Python必备的GUI库
2021/04/27 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang