2.js插件开发之webuploader 快速应用(C#)

转载:https://www.cnblogs.com/xiaodongxiaoji/p/11150590.html百度的WebUploader前端插件作为目前比较好用且免费的附件上传工具,利用了断点续传特点实现了大文件上传功能,其更好的兼容性与界面效果完全可以替换掉IE的activex 上传控件。许多人或许还不知道怎么使用,下面的详细介绍可帮助开发者快速使用。webuploader 官方下载地址:https://fex.baidu.com/webuploader/download.html用vs新建项目WebUploaderDemo引入webuploader
.js插件开发之webuploader编写一般处理程序代码/// <summary>    /// Upload 的摘要说明    /// </summary>    public class Upload : IHttpHandler    {        const string path = “/upfiles/”;//上传目录        const string tempPath = “/upfiles/temp/”;//上传临时目录
        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = “text/plain”;            //如果进行了分片            if (context.Request.Form.AllKeys.Any(m => m == “chunk”))            {                //取得chunk和chunks                int chunk = Convert.ToInt32(context.Request.Form[“chunk”]);//当前分片在上传分片中的顺序(从0开始)                int chunks = Convert.ToInt32(context.Request.Form[“chunks”]);//总分片数
                if (string.IsNullOrEmpty(context.Request[“guid”]))                    throw new Exception(“[guid]不能为空”);
                //根据GUID创建用该GUID命名的临时文件夹                string folder = context.Server.MapPath(tempPath + context.Request[“guid”] + “/”);                string tempFile = folder + chunk;
                //建立临时传输文件夹                if (!Directory.Exists(Path.GetDirectoryName(folder)))                {                    Directory.CreateDirectory(folder);                }
                FileStream addFile = new FileStream(tempFile, FileMode.Append, FileAccess.Write);                BinaryWriter AddWriter = new BinaryWriter(addFile);                //获得上传的分片数据流                HttpPostedFile file = context.Request.Files[0];                Stream stream = file.InputStream;
                BinaryReader TempReader = new BinaryReader(stream);                //将上传的分片追加到临时文件末尾                AddWriter.Write(TempReader.ReadBytes((int)stream.Length));                //关闭BinaryReader文件阅读器                TempReader.Close();                stream.Close();                AddWriter.Close();                addFile.Close();
                TempReader.Dispose();                stream.Dispose();                AddWriter.Dispose();                addFile.Dispose();                string filePath = “”;                if (chunk == chunks – 1)                {                    filePath = path + DateTime.Now.ToString(“yyyy/MM/”) + Guid.NewGuid() + Path.GetExtension(file.FileName);//合并后的文件                    ProcessRequest(folder, context.Server.MapPath(filePath));                }                context.Response.Write(“{\”chunked\” : true, \”hasError\” : false, \”filePath\” : \”” + filePath + “\”}”);            }            else//没有分片直接保存            {                string filePath = path + DateTime.Now.ToString(“yyyy/MM/”) + Guid.NewGuid() + Path.GetExtension(context.Request.Files[0].FileName);//合并后的文件                context.Request.Files[0].SaveAs(context.Server.MapPath(filePath));                context.Response.Write(“{\”chunked\” : true, \”hasError\” : false, \”filePath\” : \”” + filePath + “\”}”);            }        }        /// <summary>        /// 合并文件        /// </summary>        /// <param name=”sourcePath”>源数据文件夹</param>        /// <param name=”filePath”>合并后的文件</param>        private void ProcessRequest(string sourcePath, string filePath)        {            if (!Directory.Exists(Path.GetDirectoryName(filePath)))            {                Directory.CreateDirectory(Path.GetDirectoryName(filePath));            }            DirectoryInfo dicInfo = new DirectoryInfo(sourcePath);            if (Directory.Exists(Path.GetDirectoryName(sourcePath)))            {                FileInfo[] files = dicInfo.GetFiles();                foreach (FileInfo file in files.OrderBy(f => int.Parse(f.Name)))                {                    FileStream addFile = new FileStream(filePath, FileMode.Append, FileAccess.Write);                    BinaryWriter AddWriter = new BinaryWriter(addFile);
                    //获得上传的分片数据流                    Stream stream = file.Open(FileMode.Open);                    BinaryReader TempReader = new BinaryReader(stream);                    //将上传的分片追加到临时文件末尾                    AddWriter.Write(TempReader.ReadBytes((int)stream.Length));                    //关闭BinaryReader文件阅读器                    TempReader.Close();                    stream.Close();                    AddWriter.Close();                    addFile.Close();
                    TempReader.Dispose();                    stream.Dispose();                    AddWriter.Dispose();                    addFile.Dispose();                }                Directory.Delete(sourcePath, true);            }        }
        /// <summary>        /// 删除文件夹        /// </summary>        /// <param name=”strPath”></param>        private static void DeleteFolder(string strPath)        {            if (Directory.GetDirectories(strPath).Length > 0)            {                foreach (string fl in Directory.GetDirectories(strPath))                {                    Directory.Delete(fl, true);                }            }            //删除这个目录下的所有文件            if (Directory.GetFiles(strPath).Length > 0)            {                foreach (string f in Directory.GetFiles(strPath))                {                    System.IO.File.Delete(f);                }            }        }编写前端代码<div id=”uploadfile” class=”updown”>        <div class=”title”>            <label>上传</label>        </div>        <div id=”uploader” class=”wu-example”>            <div class=”btns”>                <div id=”pickerfile”>选择文件</div>                <button id=”ctlBtnUp” class=”btn-default”>开始上传</button>            </div>            <!–用来存放文件信息–>            <div id=”thelistupload” class=”uploader-list”></div>        </div>    </div>    <script type=”text/javascript”>        var uploadindex = 0;        function UploadInit() {            uploadindex = 1;            var GUID = WebUploader.Base.guid(); //当前页面是生成的GUID作为标示            var $list = $(”
                // swf文件路径                swf: ‘/plugins/webuploader-0.1.5/Uploader.swf’,
                // 文件接收服务端。                server: “/ashx/Upload.ashx”,
                // 选择文件的按钮。可选。                // 内部根据当前运行是创建,可能是input元素,也可能是flash.                pick: ‘
            });            uploader.on(‘beforeFileQueued’, function (file) {                $list.empty();                uploader.reset();            });            // 文件上传过程中创建进度条实时显示。            uploader.on(‘uploadProgress’, function (file, percentage) {                var $li = $(‘
            uploader.on(‘uploadError’, function (file, code) {                $(‘
            uploader.on(‘uploadComplete’, function (file) {                $(‘
            uploader.on(‘uploadAccept’, function (file, response) {                console.log(“uploadAccept:”);                console.log(file);                console.log(response);                if (response[‘hasError’] != false) {                    // 通过return false来告诉组件,此文件上传有错。
                    return false;                }                else {                    return true;                }            });            $(”
        if (uploadindex === 0) {            UploadInit();        }

        // 计算文件大小函数(保留两位小数),Size为字节大小        // size:初始文件大小        function getfilesize(size) {            if (!size)                return “”;
            var num = 1024.00; //byte            if (size < num)                return size + “B”;            if (size < Math.pow(num, 2))                return (size / num).toFixed(2) + “K”; //kb            if (size < Math.pow(num, 3))                return (size / Math.pow(num, 2)).toFixed(2) + “M”; //M            if (size < Math.pow(num, 4))                return (size / Math.pow(num, 3)).toFixed(2) + “G”; //G            return (size / Math.pow(num, 4)).toFixed(2) + “T”; //T        }
    </script>最终效果:
.js插件开发之webuploader demo下载地址:链接:https://pan.baidu.com/s/1bSMK7EZ6cdJMDeHMuFkYBA

提取码:i4cn

更多技术请关注

2.js插件开发之webuploader 快速应用(C#)》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/95.html