Uploadify in ASP.Net
和分页类似,文件上传是web开发标配的技能之一。下面介绍Uploadify的配置和使用。
一、配置
首先到Uploadify官网下载,然后在项目中添加相应引用。前台代码如下:
1.jquery.js
2.uploadify/jquery.uploadify.js
3.uploadify/uploadify.css
js代码:
$("#uploadify1").uploadify({
height: 30,
width: 120,
swf: '@Url.Content("~/Content/uploadify/uploadify.swf")',
uploader: '@Url.Content("~/Home/Upload")',
'auto': true,
'buttonText': '上传图片',
'multi': false,
'sizeLimit' : 2*1024*1024,
'formData': { 'submitType': 'image', 'studentId':studentId, 'taskId':taskId },
'fileTypeDesc': '指定文件',
'fileTypeExts': '*.jpg; *.jpeg; *.png; *.gif',
'removeTimeout': 2, //进度条消失秒数
'onInit': function () { },
'onSelect': function (fileObj) { //判断文件大小
var fileSize = fileObj.size;
if (fileSize > 2*1024*1024) {
alert("图片不得大于2M");
$('#uploadify1').uploadify('cancel');
return;
}
},
'onUploadComplete': function (file) {
},
'onUploadSuccess': function (file, data, response) { //上传成功回调方法
data = JSON.parse(data);
if(data.IsSuccess == "True" ){
alert("上传成功");
}else{
alert("上传失败");
return;
}
}
});
html代码:
<div id="">
<img width="100px;" height="100px;" id="imgPriview" src="http://images4.c-ctrip.com/target/headphoto/portrait_180_180.jpg"
alt="" />
</div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadify('upload','*');">上传</a>| <a href="javascript:$('#uploadify').uploadify('cancel')">
取消上传</a>
</p>
点击上传以后,会将数据提交到后台,交给uploadHandler.ashx处理。
二、后台
一般处理程序ahsx会处理前台提交过来的数据,把图片保存到磁盘,然后返回图片的url给客户端进行预览。
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = context.Request.MapPath("/uploadedFiles/"); string fileName = file.FileName;
string imgUrl = "http://" + context.Request.Url.Authority + "/uploadedFiles/" + fileName; if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
} file.SaveAs(uploadPath + fileName); context.Response.Write(imgUrl);
}
else
{
context.Response.Write("");
} }
一个简单的demo示范如何配置和使用Uploadify,由于Uploadify是基于Flash上传的,有一个已知的bug是上传时会丢失sessionId,进而服务端也拿不到cookie, 好在可以通过手动添加sessionId解决。
Uploadify in ASP.Net的更多相关文章
- 使用jQuery Uploadify在ASP.NET 上传附件
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuer ...
- Uploadify在asp.net下使用Demo
为了使自己以后不再去网上搜索,特记录下来 从uploadify官网http://www.uploadify.com/上下载文件 必要的文件: 1.jquery的js文件 2.jquery.upload ...
- jQuery Uploadify在ASP.NET MVC3中的使用
1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. Uploadify官方网址:http://www.uploadif ...
- uploadify在asp.net中的试用小结
花了差不多一下午的时间,总算把uploadify插件运行起来,在此对自己遇到的问题以及过程做一个小结. 一.使用步骤 1.在官网下载最新的插件包,并将包解压. 2.新建asp.net web项目,将解 ...
- uploadify加ASP.NET MVC3.0上传文件(可多条)
页面代码: <div id="fileQueuePlug"></div> <input type="file" name=&quo ...
- jQuery Uploadify在ASP.NET MVC中的使用
感谢http://www.cnblogs.com/libingql/archive/2012/09/11/2681007.html 除此之外,给大家推荐一个: http://gallery.kissy ...
- 【WebForm】ASP.NET 使用 uploadify 上传文件
说明 ASP.NET中上传文件是很常见的一项功能,经常不用的话,可能会遗忘,为了,以后能方便的调用使用,在这里做个备份说明.最后,把做的简单的DEMO上传,方便看. 主要借鉴的这个博主的: Uploa ...
- jQuery Uploadify上传插件
jQuery Uploadify在ASP.NET MVC3中的使用 1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. ...
- jQuery文件上传插件uploadify
官方网站:http://www.uploadify.com/ 参考博客:jQuery Uploadify在ASP.NET MVC3中的使用 参考博客:使用uploadify上传图片时返回“Cannot ...
随机推荐
- NLP的神经网络训练的新模式
https://blog.csdn.net/jdbc/article/details/53292414 该模式分为:embed.encode.attend.predict四部分.
- COCO数据集深入理解
TensorExpand/TensorExpand/Object detection/Data_interface/MSCOCO/ 深度学习数据集介绍及相互转换 Object segmentation ...
- 汇总c#.net常用函数和方法集
1.DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 currentTime=System.D ...
- 大数据开发实战:MapReduce内部原理实践
下面结合具体的例子详述MapReduce的工作原理和过程. 以统计一个大文件中各个单词的出现次数为例来讲述,假设本文用到输入文件有以下两个: 文件1: big data offline data on ...
- 【大数据】大数据处理-Lambda架构-Kappa架构
大数据处理-Lambda架构-Kappa架构 elasticsearch-head Elasticsearch-sql client NLPchina/elasticsearch-sql: Use S ...
- (转)真正的中国天气api接口xml,json(求加精) ...
我只想说现在网上那几个api完全坑爹有木有??? 官方的申请不来有木有,还有收费有木有?? 咱这种菜鸟只能用免费的了!!!! http://m.weather.com.cn/data/101110 ...
- 刷完OpenWrt在浏览器无法访问的解决办法
其实问题很明显. 是因为刷了trunk版固件. 并没有集成luci. 那接下来就是装luci.但是装luci需要联网(不过其实不联网其实也是可以安装的.) 我说的联网是让路有联网.而不是网线接路由,路 ...
- android自己定义进度值可拖动的seekbar
近期忙找实习,加上实验室在推新项目,须要学习新知识.所以非常长一段时间没去整理了官博客了,github也蛮久没更新.非常羞愧.接下来还是要坚持写. 今天就简单的写一下我在项目中用到的算自己定义seek ...
- tomcat中的日志开关文件(logging.properties)介绍
以tomcat-6.0.29为例: http://www.ossez.com/thread-18138-1-1.html #配置tomcat的日志输出方式,这里表示文件输出和控制台输出.handler ...
- Linux netstat命令介绍
关注Linux的系统状态,主要从两个角度出发,一个角度是系统正在运行什么服务(ps命令):另外一个就是有什么连接或服务可用(netstat命令).netstat还可以显示ps无法显示的.从inetd或 ...