Jquery上传插件 uploadify v3.1使用说明


Posted in Javascript onJune 18, 2012

官方地址:http://www.uploadify.com/

三水点靠木提供的下载地址:https://3water.com/jiaoben/21484.html

官方英文文档:http://www.uploadify.com/documentation/

使用方法(.net版本):

前台JS

$("#id").uploadify({ 
height: 30, 
swf: '/uploadify/uploadify.swf', 
uploader: '/Handler/uploadPic.ashx', 
width: 120, 
cancelImg: '/uploadify/uploadify-cancel.png', 
buttonText: '选择图片', 
fileTypeExts: '*.gif;*.jpg;*.jpeg;*.png', 
'fileSizeLimit': '6000KB', 
removeCompleted: false, 
'formData': { 
"id":"1" 
}, 
onUploadSuccess: function (file, data, response) {//上传完成时触发(每个文件触发一次) 
if (data.indexOf('错误提示') > -1) { 
alert(data); 
} 
else { 
//$("#previewImage").attr("src", data.substr(2)).hide().fadeIn(2000); 
alert("上传成功!"); 
} 
}, 
'onUploadError': function (file, errorCode, errorMsg, errorString) {//当单个文件上传出错时触发 
alert('文件:' + file.name + ' 上传失败: ' + errorString); 
} });

ASHX文件:
protected string AllowExt = "7z|aiff|asf|avi|bmp|csv|doc|docx|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pptx|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xlsx|xml|zip";//支持的文件格式 
int FileMaxSize = 10240;//文件大小,单位为Kpublicvoid ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string ParentID = context.Request.Params["id"]; 
HttpPostedFile fileUpload = context.Request.Files[0]; 
if (fileUpload != null) 
{ 
try 
{ 
string UploadDir = "~/upload/";//图片保存的文件夹 
//图片保存的文件夹路径 
string path = context.Server.MapPath(UploadDir); 
//每天上传的图片一个文件夹 
string folder = DateTime.Now.ToString("yyyyMM"); 
//如果文件夹不存在,则创建 
if (!Directory.Exists(path + folder)) 
{ 
Directory.CreateDirectory(path + folder); 
} 
//上传图片的扩展名 
string fileExtension = fileUpload.FileName.Substring(fileUpload.FileName.LastIndexOf('.')); 
//判断文件格式 
if (!CheckValidExt(fileExtension)) 
{ 
context.Response.Write("错误提示:文件格式不正确!" + fileExtension); 
return; 
} 
//判断文件大小 
if (fileUpload.ContentLength > FileMaxSize * 1024) 
{ 
context.Response.Write("错误提示:上传的文件(" + fileUpload.FileName + ")超过最大限制:" + FileMaxSize + "KB"); 
return; 
} 
//保存图片的文件名 
//string saveName = Guid.NewGuid().ToString() + fileExtension; 
//使用时间+随机数重命名文件 
string strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff");//取得时间字符串 
Random ran = new Random(); 
string strRan = Convert.ToString(ran.Next(100, 999));//生成三位随机数 
string saveName = strDateTime + strRan + fileExtension; 
Model.Album uc = new Model.Album(); 
uc.Title = fileUpload.FileName; 
uc.ImagePath = folder + "/" + saveName; 
uc.PostTime = DateTime.Now; 
uc.Pid= int.Parse(id); 
bll.Album alb = new bll.Album(); 
alb.add(uc); 
//保存图片 
fileUpload.SaveAs(path + folder + "/" + saveName); 
context.Response.Write(UploadDir + folder + "/" + saveName); 
} 
catch 
{ 
context.Response.Write("错误提示:上传失败"); 
} 
} 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
#region 检测扩展名的有效性 bool CheckValidExt(string sExt) 
/// <summary> 
/// 检测扩展名的有效性 
/// </summary> 
/// <param name="sExt">文件名扩展名</param> 
/// <returns>如果扩展名有效,返回true,否则返回false.</returns> 
public bool CheckValidExt(string strExt) 
{ 
bool flag = false; 
string[] arrExt = AllowExt.Split('|'); 
foreach (string filetype in arrExt) 
{ 
if (filetype.ToLower() == strExt.ToLower().Replace(".", "")) 
{ 
flag = true; 
break; 
} 
} 
return flag; 
} 
#endregion

参数说明:
参考 https://3water.com/article/30598.htm
3.1 版本更新 : 去除postData,更改为formData。 Json数据。 其他更改研究中。
上传文件生成缩略图显示到网页功能研究ing。
Javascript 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
解析js如何获取css样式
Dec 11 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
uploadify 3.0 详细使用说明
Jun 18 #Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 #Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 #Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 #Javascript
jQuery操作input type=radio的实现代码
Jun 14 #Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 #Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 #Javascript
You might like
php 无限极分类
2008/03/27 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python移位运算的实现
2019/07/15 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
银行简历自我评价
2014/02/11 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
学习与创新自我评价
2015/03/09 职场文书
会计求职信怎么写
2015/03/20 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
正确的理解和使用Django信号(Signals)
2021/04/14 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript