和分页类似,文件上传是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的更多相关文章

  1. 使用jQuery Uploadify在ASP.NET 上传附件

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuer ...

  2. Uploadify在asp.net下使用Demo

    为了使自己以后不再去网上搜索,特记录下来 从uploadify官网http://www.uploadify.com/上下载文件 必要的文件: 1.jquery的js文件 2.jquery.upload ...

  3. jQuery Uploadify在ASP.NET MVC3中的使用

    1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. Uploadify官方网址:http://www.uploadif ...

  4. uploadify在asp.net中的试用小结

    花了差不多一下午的时间,总算把uploadify插件运行起来,在此对自己遇到的问题以及过程做一个小结. 一.使用步骤 1.在官网下载最新的插件包,并将包解压. 2.新建asp.net web项目,将解 ...

  5. uploadify加ASP.NET MVC3.0上传文件(可多条)

    页面代码: <div id="fileQueuePlug"></div> <input type="file" name=&quo ...

  6. jQuery Uploadify在ASP.NET MVC中的使用

    感谢http://www.cnblogs.com/libingql/archive/2012/09/11/2681007.html 除此之外,给大家推荐一个: http://gallery.kissy ...

  7. 【WebForm】ASP.NET 使用 uploadify 上传文件

    说明 ASP.NET中上传文件是很常见的一项功能,经常不用的话,可能会遗忘,为了,以后能方便的调用使用,在这里做个备份说明.最后,把做的简单的DEMO上传,方便看. 主要借鉴的这个博主的: Uploa ...

  8. jQuery Uploadify上传插件

    jQuery Uploadify在ASP.NET MVC3中的使用 1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. ...

  9. jQuery文件上传插件uploadify

    官方网站:http://www.uploadify.com/ 参考博客:jQuery Uploadify在ASP.NET MVC3中的使用 参考博客:使用uploadify上传图片时返回“Cannot ...

随机推荐

  1. NLP的神经网络训练的新模式

    https://blog.csdn.net/jdbc/article/details/53292414 该模式分为:embed.encode.attend.predict四部分.

  2. COCO数据集深入理解

    TensorExpand/TensorExpand/Object detection/Data_interface/MSCOCO/ 深度学习数据集介绍及相互转换 Object segmentation ...

  3. 汇总c#.net常用函数和方法集

    1.DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 currentTime=System.D ...

  4. 大数据开发实战:MapReduce内部原理实践

    下面结合具体的例子详述MapReduce的工作原理和过程. 以统计一个大文件中各个单词的出现次数为例来讲述,假设本文用到输入文件有以下两个: 文件1: big data offline data on ...

  5. 【大数据】大数据处理-Lambda架构-Kappa架构

    大数据处理-Lambda架构-Kappa架构 elasticsearch-head Elasticsearch-sql client NLPchina/elasticsearch-sql: Use S ...

  6. (转)真正的中国天气api接口xml,json(求加精) ...

      我只想说现在网上那几个api完全坑爹有木有??? 官方的申请不来有木有,还有收费有木有?? 咱这种菜鸟只能用免费的了!!!! http://m.weather.com.cn/data/101110 ...

  7. 刷完OpenWrt在浏览器无法访问的解决办法

    其实问题很明显. 是因为刷了trunk版固件. 并没有集成luci. 那接下来就是装luci.但是装luci需要联网(不过其实不联网其实也是可以安装的.) 我说的联网是让路有联网.而不是网线接路由,路 ...

  8. android自己定义进度值可拖动的seekbar

    近期忙找实习,加上实验室在推新项目,须要学习新知识.所以非常长一段时间没去整理了官博客了,github也蛮久没更新.非常羞愧.接下来还是要坚持写. 今天就简单的写一下我在项目中用到的算自己定义seek ...

  9. tomcat中的日志开关文件(logging.properties)介绍

    以tomcat-6.0.29为例: http://www.ossez.com/thread-18138-1-1.html #配置tomcat的日志输出方式,这里表示文件输出和控制台输出.handler ...

  10. Linux netstat命令介绍

    关注Linux的系统状态,主要从两个角度出发,一个角度是系统正在运行什么服务(ps命令):另外一个就是有什么连接或服务可用(netstat命令).netstat还可以显示ps无法显示的.从inetd或 ...