jQuery文件上传插件uploadify
官方网站:http://www.uploadify.com/
参考博客:jQuery Uploadify在ASP.NET MVC3中的使用
参考博客:使用uploadify上传图片时返回“Cannot read property 'queueData' of undefined”
参考博客:ASP.NET MVC下使用文件上传
html代码:
<div class="form-group">
<input type="text" id="inputProductID" style="display:none" />
<input type="file" id="file_upload" name="file_upload" />
<p>
<a href="javascript:$('#file_upload').uploadify('upload');">上传第一个</a>
<a href="javascript:$('#file_upload').uploadify('upload','*');">上传队列</a>
<a href="javascript:$('#file_upload').uploadify('cancel');">取消第一个</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消队列</a>
</p>
</div>
js代码:
$('#file_upload').uploadify({
'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")', //指定swf文件
'uploader': '/ProductImage/upLoadImage',//后台处理的页面
//按钮显示的文字
'buttonText': '上传图片',
//显示的高度和宽度,默认 height 30;width 120
//'height': 15,
//'width': 80,
//上传文件的类型 默认为所有文件 'All Files' ; '*.*'
//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeDesc': 'Image Files',
//允许上传的文件后缀
'fileTypeExts': '*.gif; *.jpg; *.png',
//发送给后台的其他参数通过formData指定
//'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
//上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
//'queueID': 'fileQueue',
//选择文件后自动上传
'auto': false,
//设置为true将允许多文件上传
'multi': true,
//设置上传按钮背景图片
//'buttonImage': '~/Content/uploadify/browse-btn.png',
//设置已完成上传的文件是否从队列中移除,默认为true
'removeCompleted': false,
//设置上传队列中同时允许的上传文件数量,默认为999
'queueSizeLimit': 1,
//设置允许上传的文件数量,默认为999
'uploadLimit': 3,
//单个文件上传完成时触发事件
'onUploadComplete': function (file) {
alert('The file ' + file.name + ' finished processing.');
},
//单个文件上传成功后触发事件
'onUploadSuccess': function (file, data, response) {
eval("data=" + data);
alert('文件 ' + file.name + ' 已经上传成功,并返回 ' + response + ' 保存文件名称为 ' + data.SaveName);
},
//队列中全部文件上传完成时触发事件
'onQueueComplete': function (queueData) {
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
}
});
})
ASP.NET MVC 代码:
#region 上传图片
/// <summary>
/// 上传图片
/// </summary>
/// <param name="fileData"></param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult upLoadImage(HttpPostedFileBase fileData)
{
if (fileData != null)
{
try
{
// 文件上传后的保存路径
string filePath = Server.MapPath("~/UpLoad/");
if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
string fileExtension = Path.GetExtension(fileName); // 文件扩展名
string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称 fileData.SaveAs(filePath + saveName); return Json(new { Success = true, FileName = fileName, SaveName = saveName });
}
catch (Exception ex)
{
return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
else
{
return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
}
}
#endregion
jQuery文件上传插件uploadify的更多相关文章
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- JQuery文件上传插件uploadify在MVC中Session丢失的解决方案
<script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...
- 关于jquery文件上传插件 uploadify 3.1的使用
要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要 ...
- 关于jquery文件上传插件 uploadify 3.1的使用
要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要 ...
- jQuery 文件上传插件:uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
随机推荐
- [CF1027F]Session in BSU[最小基环树森林]
题意 有 \(n\) 门课程,每门课程可以选择在 \(a_i\) 或者 \(b_i\) 天参加考试,每天最多考一门,问最早什么时候考完所有课程. \(n\leq 10^6\). 分析 类似 [BZOJ ...
- mtr语言真是逆天了
实践证明,设计一个语言,还不是简单的解释没一行哦
- 腾讯云服务器linux Ubuntu操作系统搭建ftp服务器vsftpd
腾讯云服务器linux Ubuntu操作系统安装ftp服务器vsftpd 操作系统: Ubuntu Server 16.04.1 LTS 64位 下面我将系统重装, 一步一步从头开始,安装FTP服务器 ...
- let与var区别
<!DOCTYPE html> <html> <head> <title>let与var区别</title> <meta charse ...
- Minor GC&Full GC&Major GC区别及触发条件
Minor GC:从年轻代回收内存 触发条件 1.Eden区域满 2.新创建的对象大小 > Eden所剩空间 Full GC:清理整个堆空间,包括年轻代和老年代 触发条件 1.每次晋升到 ...
- alibaba/fescar 阿里巴巴 开源 分布式事务中间件
Fescar 是 阿里巴巴 开源的 分布式事务中间件,以 高效 并且对业务 0 侵入 的方式,解决 微服务 场景下面临的分布式事务问题. 示例:https://github.com/windwant/ ...
- RabbitMQ入门:路由(Routing)
在上一篇博客<RabbitMQ入门:发布/订阅(Publish/Subscribe)>中,我们认识了fanout类型的exchange,它是一种通过广播方式发送消息的路由器,所有和exch ...
- 使用过滤器解决JSP页面的乱码问题
乱码详情 总结:讨论了使用GET和POST方法,控制台和JSP页面显示的问题. 最终发现:在servlet或者过滤器中添加:request.setCharacterEncoding("ut ...
- scrapy的简单使用
使用之前的创建虚拟环境方法(pipenv) 创建虚拟环境并进入虚拟环境 mkdir douban cd douban pipenv install pipenv shell 再安装我们的scrapy ...
- Zabbix对接AD域
需要的信息:一个域账号密码,使用的端口:域名 1.先查看php是否安装了ldap模块 php –m (查看已安装的php模块) 若没有安装请参照“在已编译安装的PHP环境下安装LDAP模块”. ...