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 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
深入理解vue路由的使用
Mar 24 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 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和MySql来与ODBC数据连接
2006/10/09 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python生成ppt的方法
2018/06/07 Python
Python基本socket通信控制操作示例
2019/01/30 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
国外软件测试工程师面试题
2016/12/09 面试题
工商管理专业学生的自我评价
2013/10/01 职场文书
打架检讨书500字
2014/01/29 职场文书
领导失职检讨书
2014/02/24 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP