近来因为要做一个上传功能,而firefox又不能直接使用file这样的标签,所以试着用js来写了一个,结果发现代码太多,验证太复杂,而且效果也不理想。

  相对的,jquery提供的这一套uploadify则相当好用,但是官方只提供了php版本的,表示有点遗憾,可是没关系,c#同样可以使用。下面写一个小的Demo,也是担心自己会忘记,在这做一个记录吧

  首先下载 uploadify3.1

  我们先写个html页面

  

 <body>
<div>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id='uploadify' value="" />
<p>
<a href="javascript:$('#uploadify').uploadify('upload')">Start</a>
<a href="javascript:$('#uploadify').uploadify('cancel')">Cancel</a>
</p>
</div>
</body>

ok,页面完成之后,下面就是前奏了,我们需要导入相应的js和css样式,以及uploadify各参数的定义了,下面我们就来完成js的页面

  <script src="JS/jquery-1.8.0.js" type="text/javascript"></script>
<link href="JS/uploadify.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery.uploadify-3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("#uploadify").uploadify({
//上传false
'swf': 'JS/uploadify.swf',
//后台业务处理
'uploader': 'UploadHandler.ashx',
//按钮
'buttonText': 'Upload Image',
//设置宽高
'height': 15,
'width': 80,
'All Files': '*.*',
//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeDesc': 'Image Files',
'fileTypeExts': '*.gif;*.jpg;*.png',
'size': '5120KB',
//设置是否自动上传,选择完成后自动上传,这里我并没有自动上传
'auto': false,
//设置是否可以上传多个文件
'multi': false,
//上传成功后所执行的代码
'onUploadSuccess': function (file, data, response) {
$("#" + file.id).find('.data').html('上传完毕');
},
//上传失败时所执行的代码
'onUploadError': function (file, data, response) {
$('#' + file.id).find('.data').html('文件过大');
},
//开始上传时所执行的代码
'onUploadStart': function (file) {
alert("start");
alert(file.name);
}
});
});
</script>

这里完成之后,我们就只差最后一步了,就是后台业务的处理,asp.net一般结合handler来使用,所以我们先创建一个uploadhandler.ashx文件

     context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
HttpPostedFile file = context.Request.Files["Filedata"];
//获取保存路径
string uploadPath =
HttpContext.Current.Server.MapPath("UploadImages" + "\\");
//判断文件是否为空
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
//Save File
file.SaveAs(uploadPath + file.FileName);
//这里的返回值比较重要,1表示正确,0则是失败,成功后,会继续上传下一个文件
context.Response.Write("");
}
else {
context.Response.Write("");
}

说到这,功能便已经完成了,我发下我的文件结构图

点击这里下载uploadify 3.1

好,暂时就这些了,也是刚刚接触这个,其他的还在研究中

JQUERY Uploadify 3.1 C#使用案例的更多相关文章

  1. 使用jquery.uploadify上传文件

    今天在网上找了一天,想要找到一个比较全的使用案例,结果发现基本上全是一个版本的... 我的问题主要是上传完成后,还需要将路径获取到,然后保存到数据库. 查了一下资料发现有这么一个参数onComplet ...

  2. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

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

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

  4. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  5. jQuery uploadify 文件上传

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo ...

  6. MVC中使用jquery uploadify上传图片报302错误

    使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...

  7. .Net多文件同时上传(Jquery Uploadify)

    前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...

  8. JQuery uploadify 的使用

    在Java WEB项目中用到了上传图片的功能,于是百度了一下,发现 uploadify 的出镜率很高,于是决定使用这个插件.结果昨天调试了一天没有成功,今天早上仔细想了想,觉得应该是调用js文件的原因 ...

  9. jQuery uploadify在谷歌和火狐浏览器下无法上传

    原因: 由于jQuery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器.但firefox.chrome不会这样做 ...

随机推荐

  1. iOS SDWebImage加载大图导致内存崩溃解决方案

    static BOOL SDImageCacheOldShouldDecompressImages = YES; static BOOL SDImagedownloderOldShouldDecomp ...

  2. FP Tree算法原理总结(转载)

    FP Tree算法原理总结 在Apriori算法原理总结中,我们对Apriori算法的原理做了总结.作为一个挖掘频繁项集的算法,Apriori算法需要多次扫描数据,I/O是很大的瓶颈.为了解决这个问题 ...

  3. wps文档怎样去除广告

    安装完 WPS 之后右键—属性—打开文件夹位置(如图) 接下来进入 10.1.0.6929 文件夹内,再次进入 office6 文件夹内,找到 wpscenter 应用程序,将其删除.此应用包含定时弹 ...

  4. jq bootstrap select 点击不能动弹

    jq  bootstrap select 点击不能动弹   因为是样式selectpicker  冲突. 解决办法换 样式  form-control <select name="ty ...

  5. ubuntu 查看服务列表

    查看服务列表代码 sudo service --status-allsudo initctl list from: http://zhidao.baidu.com/link?url=hLMXGocC2 ...

  6. math课本复习

    第七章 微分方程 第一节 微分方程的基本概念    未知函数.未知函数的倒数与自变量之间的关系的方程,叫做微分方程. 第二节 可分离变量的微分方程 第三节 齐次方程 第四节 一阶线性微分方程 总结:任 ...

  7. [Android Studio 权威教程]AS 中配置强大的版本号管理系统(Git、SVN、等)

    在Eclipse中加入Git等版本号管理工具须要自己加入插件.并且个人认为不咋好用,在AS中已经给我们集成好了,我们仅仅须要配置一下就OK了.今天就和大家聊聊怎么配置以及使用的要点. 1. 安装Git ...

  8. 2.二级接口ListableBeanFactory

    这个随笔主要讲的是ListableBeanFactory package org.springframework.beans.factory; import java.lang.annotation. ...

  9. iOS 符号化崩溃日志

    1.获取一下三个文件   1. crash报告(.crash文件) 2. 符号文件 (.dsymb文件) 3. 应用程序文件 (appName.app文件,把IPA文件后缀改为zip,然后解压,Pay ...

  10. Netty 源码(ChannelHandler 死磕)

    精进篇:netty源码死磕5  - 揭开 ChannelHandler 的神秘面纱 目录 1. 前言 2. Handler在经典Reactor中的角色 3. Handler在Netty中的坐标位置 4 ...