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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
JavaScript实现Sleep函数的代码
Mar 04 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
JS对日期操作封装代码实例
Nov 08 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
PHP安全防范技巧分享
2011/11/03 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
ES6中module模块化开发实例浅析
2017/04/06 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
竞争上岗演讲稿
2014/01/05 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python