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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
js模糊查询实例分享
Dec 26 Javascript
canvas 实现中国象棋
Feb 17 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
element-ui 本地化使用教程详解
Oct 28 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产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
javascript date格式化示例
2013/09/25 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
javascript中this的四种用法
2015/05/11 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
给市场的环保建议书
2014/05/14 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
2015年教师节感言
2015/08/03 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL