为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题
在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样显示进度条问题,以及上传前图片预览,也试过各种办法,直到有一天看到百度编辑器中的图片上传功能。花了点功夫把他单独提取出来。
最终效果图如下:
这个功能可以提供多个图片文件选择,预览,然后对上传的图片在上传队列中删除,以及旋转和,上传中进度条显示,以及上传相册的选择。%20
源代码下载路径为:http://pan.baidu.com/s/13iNYw
结构
1:FLASH文件:imageUploader.swf%20
用来显示上传队列,并提供图片增加,预览,删除,旋转,以及进度条的显示功能!
包括了一些参数设置,例如上传处理程序,以及相关的属性设置。其中最重要参数为:flashvars,%20他的值经过URL编码。
URL编码转换功能,你可以通过http://tool.chinaz.com/Tools/URLEncode.aspx%20这个工具实现。
原始值为:
container=flashContainer&url=/BaiduUE/imageUp&ext={"param1":"value1",%20"param2":"value2"}&fileType={"description":"图片",%20"extension":"*.gif;*.jpeg;*.png;*.jpg"}&flashUrl=imageUploader.swf&width=608&height=272&gridWidth=121&gridHeight=120&picWidth=100&picHeight=100&uploadDataFieldName=upfile&picDescFieldName=pictitle&maxSize=4&comPRessSize=2&maxNum=32&compressSide=0&compressLength=900
备注
2:JS脚本
用来于处理外部相册选择,以及FLASH事件相应,以及调用FLASH上传功能来实现图片上传
/***********************Flash事件*****************************//*** 检查flash状态* @private* @param {Object} target flash对象* @return {Boolean}*/function _checkReady(target) { if (typeof target !== 'undefined' && typeof target.flashInit !== 'undefined' && target.flashInit()) { return true; } else { return false; }}/*** 创建一个随机的字符串* @private* @return {String}*/function _createString() { var prefix = 'mw__flash__'; return prefix + Math.floor(Math.random() * 2147483648).toString(36);}/*** 为传入的匿名函数创建函数名* @private* @param {String|Function} fun 传入的匿名函数或者函数名* @return {String}*/function _createFunName(fun) { var name = ''; name = _createString(); window[name] = function () { fun.apply(window, arguments); }; return name;}/***反复判断Flash是欧加载完成,完成后为Flash添加回调函数..*/var interval = setInterval(function () { try { var flash = thisMovie("flash"); if (_checkReady(flash)) { //轮询flash的某个方法即可 var callBack = []; callBack[0] = _createFunName(selectFileCallback); callBack[1] = _createFunName(exceedFileCallback); callBack[2] = _createFunName(deleteFileCallback); callBack[3] = _createFunName(StartUploadCallback); callBack[4] = _createFunName(uploadCompleteCallback); callBack[5] = _createFunName(uploadErrorCallback); callBack[6] = _createFunName(allCompleteCallback); callBack[7] = _createFunName(changeHeightCallback); thisMovie("flash").call('setJSFuncName', [callBack]); clearInterval(interval); } } catch (ex) { }}, 20);//获得Flash对象function thisMovie(movieName) { if (navigator.appName.indexOf("Misrosoft") != -1) { return window[movieName]; } else { return document[movieName]; }}
3:一般处理程序:Upload.ashx
用来实现asp.net图片服务器保存
string state = "SUCCESS"; string URL = null; string currentType = null; string uploadpath = null; string filename = null; string originalName = null; HttpPostedFile uploadFile = null; public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write(UploadPoto(context)); } #region 照片上传 public string UploadPoto(HttpContext context) { int aid = Convert.ToInt32(context.Request.Form["aid"]); //获得相册ID bool mark = Convert.ToString(context.Request.Form["mark"]).ToLower() == "true"; //获得是否有水印 //上传配置 string pathbase = "Upload/" + aid.ToString(); //保存路径 int size = 2; //文件大小限制,单位MB string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式 //上传图片 Hashtable info = new Hashtable(); info = upFile(context,pathbase, filetype, size, mark); //获取上传状态 string title = getOtherInfo(context,"pictitle"); //获取图片描述 string oriName = getOtherInfo(context,"fileName"); //获取原始文件名 string ret = "{'url':'" + info["url"] + "','title':'" + title + "','original':'" + oriName + "','state':'" + info["state"] + "'}"; return ret; } private Hashtable upFile(HttpContext context,string pathbase, string[] filetype, int size, bool mark) { pathbase = pathbase + "/"; uploadpath = context.Server.MapPath(pathbase);//获取文件上传路径 try { uploadFile = context.Request.Files[0]; originalName = uploadFile.FileName; //目录创建 createFolder(); //格式验证 if (checkType(filetype)) { state = "不允许的文件类型"; } //大小验证 if (checkSize(size)) { state = "文件大小超出网站限制"; } //保存图片 if (state == "SUCCESS") { filename = reName(); string smallPath = reSmallName(); string waterPath = rePicName(); uploadFile.SaveAs(uploadpath + filename); string savePath = uploadpath + filename; ImageClass imageClass = new ImageClass(); if (imageClass.ShowThumbnail(savePath, uploadpath + smallPath, 640)) //如果有小图,则删除原图 { FileInfo fi = new FileInfo(savePath); fi.Delete(); URL = pathbase + smallPath; filename = smallPath; } else { URL = pathbase + filename; } if (mark) { string watxt = "我是水印哈。。。"; if (ImageClass.WriterText(uploadpath + filename, uploadpath + waterPath, watxt)) { URL = pathbase + waterPath; filename = waterPath; } } } } catch (Exception e) { state = "未知错误"; URL = ""; } return getUploadInfo(); } #endregion #region 上传文件的辅助方法 /** * 获取文件信息 * @param context * @param string * @return string */ protected string getOtherInfo(HttpContext context,string field) { string info = null; if (context.Request.Form[field] != null && !String.IsNullOrEmpty(context.Request.Form[field])) { info = field == "fileName" ? context.Request.Form[field].Split(',')[1] : context.Request.Form[field]; } return info; } /** * 获取上传信息 * @return Hashtable */ protected Hashtable getUploadInfo(
新闻热点
疑难解答