zoukankan      html  css  js  c++  java
  • asp.net mvc5 WebUploader多文件大文件上传

    1、首先加载

    <link rel="stylesheet" type="text/css" href="~/Content/scripts/plugins/webuploader/webuploader.css">
    <script type="text/javascript" src="~/Content/scripts/plugins/webuploader/webuploader.js"></script>

    2、在页面中放入DIV

    <div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
    <div id="picker">选择文件</div>
    <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" />
    </div>
    </div>

    3、初始化 WebUploader

    <script>
     var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
        var GUID = WebUploader.Base.guid();//一个GUID
        $(function () {
            var $ = jQuery;
            var $list = $('#thelist');
            var uploader = WebUploader.create({
    
                // 选完文件后,是否自动上传。
                auto: false,
                // swf文件路径
                swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf',
    
                // 文件接收服务端。
                server: applicationPath + 'BusinesManage/KnowledgeBase/Upload',
    
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                pick: '#picker',
    
                chunked: true,//开始分片上传
                chunkSize: 2048000,//每一片的大小
                formData: {
                    guid: GUID //自定义参数,待会儿解释
                },
    
                // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
                resize: false
            });
            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', function (file) {
                $list.append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                '</div>');
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');
    
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                      '<div class="progress-bar" role="progressbar" style=" 0%">' +
                      '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
                }
    
                $li.find('p.state').text('上传中');
    
                $percent.css('width', percentage * 100 + '%');
            });
    
            // 文件上传成功,给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
    
                $('#' + file.id).find('p.state').text('已上传');
                $.post('../../BusinesManage/KnowledgeBase/Merge', { guid: GUID, fileName: file.name }, function (data) {
                    $("#uploader .state").html("上传成功...");
                });
            });
    
            // 文件上传失败,显示上传出错。
            uploader.on('uploadError', function (file) {
                $('#' + file.id).find('p.state').text('上传出错');
            });
    
            // 完成上传完了,成功或者失败,先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').fadeOut();
            });
    
            //所有文件上传完毕
            uploader.on("uploadFinished", function () {
                //提交表单
    
            });
            //开始上传
            $("#ctlBtn").click(function () {
                uploader.upload();
    
            });
    
        });
      </script>

    4、后台处理

     1  #region 文件上传
     2         [HttpPost]
     3         public ActionResult Upload()
     4         {
     5             string fileName = Request["name"];
     6             string fileRelName = fileName.Substring(0,fileName.LastIndexOf('.'));//设置临时存放文件夹名称
     7             int index = Convert.ToInt32(Request["chunk"]);//当前分块序号
     8             var guid = Request["guid"];//前端传来的GUID号
     9             var dir = Server.MapPath("~/Upload");//文件上传目录
    10             dir = Path.Combine(dir, fileRelName);//临时保存分块的目录
    11             if (!System.IO.Directory.Exists(dir))
    12                 System.IO.Directory.CreateDirectory(dir);
    13             string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突
    14             var data = Request.Files["file"];//表单中取得分块文件
    15             //if (data != null)//为null可能是暂停的那一瞬间
    16             //{
    17             data.SaveAs(filePath);//报错
    18             //}
    19             return Json(new { erron = 0 });//Demo,随便返回了个值,请勿参考
    20         }
    21         public ActionResult Merge()
    22         {
    23             var guid = Request["guid"];//GUID
    24             var uploadDir = Server.MapPath("~/Upload");//Upload 文件夹
    25             var fileName = Request["fileName"];//文件名
    26             string fileRelName = fileName.Substring(0, fileName.LastIndexOf('.'));
    27             var dir = Path.Combine(uploadDir, fileRelName);//临时文件夹          
    28             var files = System.IO.Directory.GetFiles(dir);//获得下面的所有文件
    29             var finalPath = Path.Combine(uploadDir, fileName);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)
    30             var fs = new FileStream(finalPath, FileMode.Create);
    31             foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write
    32             {
    33                 var bytes = System.IO.File.ReadAllBytes(part);
    34                 fs.Write(bytes, 0, bytes.Length);
    35                 bytes = null;
    36                 System.IO.File.Delete(part);//删除分块
    37             }
    38             fs.Flush();
    39             fs.Close();
    40             System.IO.Directory.Delete(dir);//删除文件夹
    41             return Json(new { error = 0 });//随便返回个值,实际中根据需要返回
    42         }
    43         #endregion
  • 相关阅读:
    第十七篇 ORM跨表查询和分组查询---二次剖析
    第十六篇随机验证码
    第十五篇 用户认证auth
    crawler_网络爬虫中编码的正确处理与乱码的解决策略
    java_Eclipse自动生成作者、日期注释等功能设置_导入 xml方式
    mysql_windows_安装版添加到服务开机自启动
    java_model_dao_自动生成_generator-mybatis-generator-1.3.2 基于maven插件
    java_eclipse_maven_svn_主题彩色插件_全屏插件
    mysql_MYSQL远程登录权限设置
    crawler_phantomjs_windows_linux下demo
  • 原文地址:https://www.cnblogs.com/guolunan/p/6002741.html
Copyright © 2011-2022 走看看