百度Uploader上传原理

发布时间：2018/3/3 14:11:52  次浏览  作者:admin

<!--第一步引入 百度Uploader-->
<!--上传组件皮肤已经在公共样式里-->
    <script src="../../scripts/webuploader/webuploader.min.js"></script>


<!--第二步建立缩略图控件和图片路径控件-->

        <tr style="display: ;">
            <td>封面图：</td>
            <td>
<!--这个Div是用来放缩略图的-->
                <div id="uploader-demo">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list" style="margin-bottom:15px;"></div>
                    <div id="filePicker">选择图片</div>
                </div>
                <input type="hidden" id="txt_img_url" name="img_url" value="" /><!--存放文件路径-->
            </td>
        </tr>


<!--第三步上传组件初始化-->

            // 初始化Web Uploader  S 
                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: '/script/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: '/Wzsh_product/ashx/Wzsh_productHandler.ashx?json={"action":"addimg"}',
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: { id: top.$('#filePicker'), multiple: false },
                    //fileNumLimit: 1,
                    // 只允许选择图片文件。
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });
                // 文件上传成功  
                uploader.on('uploadSuccess', function (file, response) {
                    var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '</div>'),
                        $img = $li.find('img'),
                        $list = top.$('#fileList');
                    // $list为容器jQuery实例
                    $list.html("");
                    $list.append($li);
                    // 创建缩略图
                    // 如果为非图片文件，可以不用调用此方法。
                    // thumbnailWidth x thumbnailHeight 为 100 x 100
                    uploader.makeThumb(file, function (error, src) {
                        if (error) {
                            $img.replaceWith('<span>不能预览</span>');
                            return;
                        }

                        $img.attr('src', src);
                    }, 100, 100);
                    top.$('#txt_img_url').val(response.imgurl);
                    alert(response.msg);
                });
                // 初始化Web Uploader  E



<!--第四步 ashx后台程序处理-->

                case "addimg":
                    string pathlj = "~/upload/image/" + DateTime.Now.ToString("yyyyMMdd") + "/";
                    string tmppath = "/upload/image/" + DateTime.Now.ToString("yyyyMMdd") + "/";
                    SaveImg(pathlj, context, tmppath);//上传图片函数

//处理图片函数


        /// <summary>
        /// 图片保存操作
        /// </summary>
        /// <param name="basePath"></param>
        private void SaveImg(string basePath, HttpContext context, string temppath)
        {
            var name = string.Empty;
            basePath = (basePath.IndexOf("~") > -1) ? context.Server.MapPath(basePath) :
            basePath;
            HttpFileCollection files = context.Request.Files;
            if (!Directory.Exists(basePath))//如果文件夹不存在创建文件夹
                Directory.CreateDirectory(basePath);

            var suffix = files[0].ContentType.Split('/');
            //var _suffix = suffix[1].Equals("jpeg", StringComparison.CurrentCultureIgnoreCase) ? "" : suffix[1];
            var _temp = System.Web.HttpContext.Current.Request["name"];
            var fname = System.Web.HttpContext.Current.Request["fname"];//自定义文件名上传
            var _suffix = GetFileExt(_temp);
            //if (!string.IsNullOrEmpty(_temp))
            //{
            //    name = _temp;
            //}
            //else
            //{
            Random rand = new Random(24 * (int)DateTime.Now.Ticks);
            name = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + rand.Next() + "." + _suffix;
            //}
            //假如自定义文件名上传
            if (!string.IsNullOrEmpty(fname))
            {
                name = fname;
            }

            var full = basePath + name;
            var imgurl = temppath + name;
            files[0].SaveAs(full);
            var _result = "";
            _result = "{\"msg\" : \"图片上传成功!\", \"result\" : \"true\", \"filename\" : \"" + name + "\", \"imgurl\" : \"" + imgurl + "\"}";
            System.Web.HttpContext.Current.Response.Write(_result);
        }

        /// <summary>
        /// 返回文件扩展名，不含“.”
        /// </summary>
        /// <param name="_filepath">文件全名称</param>
        /// <returns>string</returns>
        public static string GetFileExt(string _filepath)
        {
            if (string.IsNullOrEmpty(_filepath))
            {
                return "";
            }
            if (_filepath.LastIndexOf(".") > 0)
            {
                return _filepath.Substring(_filepath.LastIndexOf(".") + 1); //文件扩展名，不含“.”
            }
            return "";
        }