和分页类似,文件上传是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. C#如何通过反射调用带有ref或者out的参数的方法

    写这篇博客,原起今天CyljXu问我一个问题:如何通过反射调用带有ref或者out的参数的方法?想着可能其他人也会遇到这个问题,权且记录下来,以备后行者搜索到. 这个在MSDN上有解释,参考 Meth ...

  2. JavaScript 实现打印,打印预览,打印设置

    WebBrowser是IE内置的浏览器控件,无需用户下载. 一.WebBrowser控件 <object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CL ...

  3. (转)C# SendMessage 参数与例子

    原文:http://hi.baidu.com/ytmeng/blog/item/25f5de5157931a888c543001.html using System;using System.IO;u ...

  4. POJ 1755 Triathlon 半平面交

    看的这里:http://blog.csdn.net/non_cease/article/details/7820361 题意:铁人三项比赛,给出n个人进行每一项的速度vi, ui, wi;  对每个人 ...

  5. [Algorithm] Search element in a circular sorted array

    function findInCircularlySortedAry (ary = [], target) { ) { ; } ) { ] === target ? : -; } let , high ...

  6. [React] Asynchronously Load webpack Bundles through Code-splitting and React Suspense

    One approach to building high performance applications with webpack is to take advantage of code-spl ...

  7. linux mount

    挂载       mount //10.65.200.168/linux_bj /home/linux_bj -t cifs -o username=niu,password=ruanxiaopang ...

  8. python网络爬虫 - 如何伪装逃过反爬虫程序

    有的时候,我们本来写得好好的爬虫代码,之前还运行得Ok, 一下子突然报错了. 报错信息如下: Http 800 Internal internet error 这是因为你的对象网站设置了反爬虫程序,如 ...

  9. asp.net判断文件或文件夹是否存在

    在上传文件时经常要判断文件夹是否存在,如果存在就上传文件,否则新建文件夹再上传文件 判断语句为 if (System.IO.Directory.Exists(Server.MapPath(" ...

  10. WinForm 之 VS2010发布、打包安装程序

    第一步.在vs2010 打开要打包的应用程序解决方案,右键“ 解决方案 ” → “ 添加 ” → “ 新建项目 ” → “ 其他项目类型 ” → “ 安装和部署 ” → “ Visual Studio ...