<!--第一步引入 百度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 ""; }
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4