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 风格的HTML文本转义
Jul 01 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
js实现碰撞检测
Jan 29 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
一个简易需要注册的留言版程序
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python打开使用的方法
2019/09/30 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
商场总经理岗位职责
2014/02/03 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android