• 依赖弹出框lhdaiglog的基于WebUploader批量上传图片


    初始上传界面

     //链接添加弹窗 html代码段↓
            var msgcontent = "";
            msgcontent += '<ul class="linkAddBox">';
            msgcontent += '<li><p class="Z_pHOTOtIPS p10" style="margin-top:0;display: inline-block;"><b class="Z_TipsIcon fl mr5"></b><span class="fl mt4 color6">说明:一次可以最多可以上传50张.jpg .png .bmp .gif格式的图片,每张不超过10M。按<b>ctrl</b>或<b>shift</b>可选择多张</span></p></li>';
            msgcontent += '<li><span> 选择专辑:</span><select class="typeselectdata"><option value="0">全部专辑</option></select></li>';
            msgcontent += '<li class="clearfix">';
            msgcontent += '<div id="ChoosePhoto"><img src="/Public/Image/Upload.jpg" style="  80px;height: 40px;"/></div>';
            msgcontent += '</li> <li><div id="fileList" class="uploader-list clearfix" style="max-height: 300px;overflow: auto;"></div></li></ul>';
            //链接添加弹窗 html代码段↑
            dia = $.dialog({
                title: '添加专辑图片',
                content: msgcontent,
                fixed: true,
                min: false,
                max: false,
                lock: true,
                okVal: '确定',
                ok: function() {
                    return s;//单击确定按钮时暂不关闭弹出框
                },
                cancelVal: '取消',
                cancel: true
            });
            UploadImge();

    控件初始化

    //批量上传图片
    function UploadImge() {
        $list = $(window.parent.document).find('#fileList'),
        // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,
        // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,
        // 初始化Web Uploader
        uploader = WebUploader.create({
            // 自动上传true/false。
            auto: false,
            // swf文件路径
            swf: '/Portal/Js/Common/diyUpload/js/Uploader.swf',
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: $(window.parent.document).find("#ChoosePhoto"),
            // 只允许选择文件,可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
            }
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function(file) {
    
            var filetype = file.name.split('.')[1];
            var st = false;
            switch (filetype) {
                case "gif":
                    st = true;
                    break;
                case "jpg":
                    st = true;
                    break;
                case "jpeg":
                    st = true;
                    break;
                case "bmp":
                    st = true;
                    break;
                case "png":
                    st = true;
                    break;
                default:
                    break;
            }
            if (!st) {
                jsprint('请上传正确格式的图片:"gif,jpg,jpeg,bmp,png"!!', '', 'Error');
                return false;
            }
            $(window.parent.document).find(".ui_state_highlight").unbind("click").bind("click", function() {
                Tid = $(window.parent.document).find(".typeselectdata option:selected").val();
                if (Tid == 0) {
                    jsprint('专辑不能为空!!', '', 'Error');
                    return false;
                }
                var obj = {};
                obj = { op: "uploadphoto", Tyid: Tid, navName: navName };
                if (uploader.getFiles("inited").length > 0) {
                    uploader.option("formData", obj);
                    uploader.option("server", "/Ajax/Manage.ashx");
                    uploader.upload();
                }
                else {
                    jsprint('未选择任何视频文件!!', '', 'Error');
                    return false;
                }
            });
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail" style="float: left;  margin-left: 5px;">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                $img = $li.find('img');
    
            $list.append($li);
            // 创建缩略图
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
    
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function(file, percentage) {
            var $li = $(window.parent.document).find('#' + file.id),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }
            $percent.css('width', percentage * 100 + '%');
        });
    
        // 文件上传成功,给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function(file) {
            $(window.parent.document).find('#' + file.id).addClass('upload-state-done');
        });
        // 文件上传失败,现实上传出错。
        uploader.on('uploadError', function(file) {
            var $li = $(window.parent.document).find('#' + file.id),
                $error = $li.find('div.error');
            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });
    
        // 完成上传完了,成功或者失败,先删除进度条。
        uploader.on('uploadComplete', function(file) {
            $(window.parent.document).find('#' + file.id).find('.progress').remove();
            if (uploader.getFiles().length == uploader.getStats().successNum) {//当上传成功后重新加载数据
                dia.close();//上传完成时关闭弹出框
                BindPhotoes(1, 20);//重新加载数据
            }
        });
    }

    一般处理程序处理上传图片

     HttpFileCollection fileCollection = cnt.Request.Files;//获取客户端传来的文件六流
                if (fileCollection.Count == 0)
                {
                    //未接收到文件
                    //防止发生异常
                    cnt.Response.Write(JsonHelper.SerializeObject(new { status = false, msg = "你未选中任何图片" }));
                    return;
                }
                System.Drawing.Image img = System.Drawing.Image.FromStream(fileCollection[0].InputStream);
                //服务器段相对路径,上传到相册所在的文件夹下
                string relativePath = "/Upload/PhotoImage/" + usermodel.xj_UserName + "/" + DateTime.Now.ToString("yyyyMM");
                strpath = UploadImg(fileCollection, relativePath);//获得文件存储路径
                if (strpath == "")
                {
                    cnt.Response.Write(JsonHelper.SerializeObject(new { status = false, msg = "保存图片发生异常" }));
                    return;
                }

    图片处理函数

      /// <summary>
            /// 处理上传图片
            /// </summary>
            /// <param name="Id"></param>
            /// <param name="Gid"></param>
            /// <returns></returns>
            private string UploadImg(HttpFileCollection fileCollection, string relativePath)
            {
                // 映射到服务器上的物理路径
                string physicalPath = cnt.Server.MapPath(relativePath);
                if (!Directory.Exists(physicalPath))
                {
                    Directory.CreateDirectory(physicalPath);
                }
                //以当前时间为随机种子
                Random rand = new Random(24 * (int)DateTime.Now.Ticks);
                int fileId = rand.Next();
                string ext = fileCollection[0].FileName.Split('.').Last().ToLower();
                string fileName = fileId + "." + ext;
                //保存文件到本地
                fileCollection[0].SaveAs(physicalPath + fileName);
                string filePath = relativePath + fileName;
                return filePath;//返回缩略图和原图保存路径
            }
  • 相关阅读:
    jquery常用获取属性的方法有哪些(attr prop区别)
    Java中 List、Set、Map 之间的区别
    mysql查询语句where后面加if判断
    mysql if 排序_MySQL ORDER BY IF() 条件排序
    Java 如何逆向遍历一个 List
    解决java.util.concurrent.RejectedExecutionException(Java多线程问题)
    list,map,set的区别
    Java8 List去掉重复对象以及保证添加顺序
    java 常用的几种集合类总结
    浅析Pinia的简单使用
  • 原文地址:https://www.cnblogs.com/ws-yizhiduxiu/p/6306158.html
Copyright © 2020-2023  润新知