初始上传界面
//链接添加弹窗 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;//返回缩略图和原图保存路径 }