zoukankan      html  css  js  c++  java
  • 使用百度的webuploader进行附件上传

    相较于之前使用的上传空间的优点:支持html5,不用再安装flash插件,没有大小限制,分片以后上传,上传以后再进行合并。

    前端js代码

    <script type="text/javascript">
        var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
        var GUID = WebUploader.Base.guid();//一个GUID
    
        $(function () {
            var $ = jQuery;
            var uploader = WebUploader.create({
    
                // 选完文件后,是否自动上传。
                auto: false,
                // swf文件路径
                swf: applicationPath + './Content/Scripts/webuploader/Uploader.swf',
    
                // 文件接收服务端。
                server: applicationPath + '/QuotationModule/PQuotation_Offer/Upload',
    
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                pick: '#uploadify',
    
                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>');
                //alert(11);
                var name = file.name;    //文件名
                var type = fileType(file.name);    //文件类型,获取的是文件的后缀
                var volume = bytesToSize(file.size);    //文件大小格式化
    
                document.getElementById("tt").style.display = "block";
                document.getElementById("tt").innerHTML = name + type + "等待上传。。。";
                //var oTr = $("<tr></tr>");
                //var str = '<td><cite title="' + name + '">' + name + '</cite></td>';
                //str += '<td>' + type + '</td>';
                //str += '<td>' + volume + '</td>';
                //str += '<td id="jintutiao">';
                //str += '<span id="baifenbi"></span>0%';
                //str += '</td>';
                //str += '<td id="uploding">等待上传</td>';
                //$(".fileList").html(str)
    
    
            });
            var aa = 1;
            // 文件上传过程中创建进度条实时显示。
            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('上传中');
                //$("#uploding").html("上传中");
    
                //$percent.css('width', percentage * 100 + '%');
    
                //if (percentage == 1) {
                //    aa++;
                //}
                //if (aa <= 2) {
                //    var shuzi = percentage * 100;
                //    $("#baifenbi").html(shuzi.toFixed(2));
                //}
    
            });
    
            // 文件上传成功,给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                //$('#' + file.id).find('p.state').text('已上传');
                $.post('/QuotationModule/PQuotation_Offer/Merge', { guid: GUID, fileName: file.name }, function (data) {
                    //console.log(data);
                    //alert(data.filepath);
    
                    alert("上传成功!");
                    Loading(false, "文件上传中!");
                    var address = data.filepath;
                    $("#attach").val(data.filepath);
                    $("#attachName").val(data.fileName);
                    //alert($("#offerAttach").val());
                    address = address.replace('~', '../../../../');
                    document.getElementById("tt").style.display = "block";
                    document.getElementById("tt").innerHTML = "<a href="" + address + "" download="" + data.fileName + "">" + data.fileName + "</a>";
    
                });
            });
    
            // 文件上传失败,显示上传出错。
            uploader.on('uploadError', function (file) {
                alert('上传出错');
            });
    
            // 完成上传完了,成功或者失败,先删除进度条。
            uploader.on('uploadComplete', function (file) {
                //$('#' + file.id).find('.progress').fadeOut();
            });
    
            //所有文件上传完毕
            uploader.on("uploadFinished", function () {
                //提交表单
    
            });
            //开始上传
            $("#ctlBtn").click(function () {
                Loading(true, "文件上传中!");
                uploader.upload();
    
            });
    
        });
    
    
        //字节大小转换,参数为b
        function bytesToSize(bytes) {
            var sizes = ['Bytes', 'KB', 'MB', 'G'];
            if (bytes == 0) return 'n/a';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
        };
    
        //通过文件名,返回文件的后缀名
        function fileType(name) {
            var nameArr = name.split(".");
            return nameArr[nameArr.length - 1].toLowerCase();
        }
    </script>

    后台的C#代码

            [HttpPost]
            public ActionResult Upload()
            {
                string fileName = Request["name"];
                string fileRelName = fileName.Substring(0, fileName.LastIndexOf('.'));//设置临时存放文件夹名称
                int index = Convert.ToInt32(Request["chunk"]);//当前分块序号
                var guid = Request["guid"];//前端传来的GUID号
                var dir = Server.MapPath("~/Upload");//文件上传目录
                dir = Path.Combine(dir, fileRelName);//临时保存分块的目录
                if (!System.IO.Directory.Exists(dir))
                    System.IO.Directory.CreateDirectory(dir);
                string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突
                var data = Request.Files["file"];//表单中取得分块文件
                string extension = data.FileName.Substring(data.FileName.LastIndexOf(".") + 1,
                    (data.FileName.Length - data.FileName.LastIndexOf(".") - 1));//获取文件扩展名
                //if (data != null)//为null可能是暂停的那一瞬间
                //{
                data.SaveAs(filePath + fileName);
                //}
                return Json(new { erron = 0 });//Demo,随便返回了个值,请勿参考
            }
            public ActionResult Merge()
            {
                var guid = Request["guid"];//GUID
                var uploadDir = Server.MapPath("~/Upload");//Upload 文件夹
                var fileName = Request["fileName"];//文件名
                string fileRelName = fileName.Substring(0, fileName.LastIndexOf('.'));
                var dir = Path.Combine(uploadDir, fileRelName);//临时文件夹          
                var files = System.IO.Directory.GetFiles(dir);//获得下面的所有文件
    
                string fileGuid = CommonHelper.GetGuid;
    
                string extension = fileName.Substring(fileName.LastIndexOf(".") + 1,
                    (fileName.Length - fileName.LastIndexOf(".") - 1));//获取文件扩展名
    
                string uploadDate = DateTime.Now.ToString("yyyyMMdd");
                //string UserId = ManageProvider.Provider.Current().UserId;
    
                string virtualPath = string.Format("~/Resource/Document/NetworkDisk/{0}/{1}/{2}{3}", "Offer", uploadDate, fileGuid, "."+extension);
    
                var finalPath = Server.MapPath(virtualPath);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)
                //创建文件夹,保存文件
                string path = Path.GetDirectoryName(finalPath);
                Directory.CreateDirectory(path);
                var fs = new FileStream(finalPath, FileMode.Create);
                foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write
                {
                    var bytes = System.IO.File.ReadAllBytes(part);
                    fs.Write(bytes, 0, bytes.Length);
                    bytes = null;
                    System.IO.File.Delete(part);//删除分块
                }
                fs.Flush();
                fs.Close();
                System.IO.Directory.Delete(dir);//删除文件夹
                return Json(new { filepath = virtualPath, fileName = fileRelName });//返回文件存储的路径,以及文件原来的名称
            }
  • 相关阅读:
    201771010135 杨蓉庆《面对对象程序设计(java)》第十五周学习总结
    201771010135 杨蓉庆/张燕/杨玲《面对对象程序设计(java)》第十四周学习总结
    201771010135 杨蓉庆/张燕《面对对象程序设计(java)》第十三周学习总结
    团队作业6—复审与事后分析
    团队作业6——Alpha阶段项目复审
    团队作业6——事后分析
    团队作业5——测试与发布(Alpha版本)
    团队作业4-项目汇总
    团队作业4-Day7
    团队作业4-Day6
  • 原文地址:https://www.cnblogs.com/lovejunjuan/p/11058454.html
Copyright © 2011-2022 走看看