JQuery.uploadify 上传文件插件的使用详解 for ASP.NET


Posted in Javascript onJanuary 22, 2010

后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..!

接下来就讲讲使用过程吧:

1. 下载

   官方网站:http://www.uploadify.com/

   直接下载:jquery.uploadify-v2.1.0.rar

   我的Demo: MyUpload.rar                官方网站也有demo

   下载解压后:

      JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

     说明:它里面有demo  但是是PHP的,还有一个帮助文档:uploadify v2.1.0 Manual.pdf.

2.创建工程:

    结构如图>>

    JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    文件说明:

     A.js文件夹下的所有文件:必需,从下载下来的包里解压复制过来,名字可以自己改改

   B.Default.aspx:测试页,后台没有代码

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication2._Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>jquery.uploadify 上传插件的使用</title> 
<link rel="Stylesheet" href="js/uploadify.css" /> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/swfobject.js"></script> 
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#uploadify").uploadify({ 
'uploader': 'js/uploadify.swf', 
'script': 'Upload.aspx', 
'cancelImg': 'js/cancel.png', 
'folder': 'upload', 
'queueID': 'fileQueue', 
'auto': false, 
'multi': true, 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<input type="file" name="uploadify" id="uploadify" /> 
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a> 
<div id="fileQueue"></div> 
</form> 
</body> 
</html>

C.Upload.aspx: 处理上传文件
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Upload.aspx.cs" Inherits="WebApplication2.Upload" %>

代码
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using System.IO; 
namespace WebApplication2 
{ 
public partial class Upload : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
HttpPostedFile file = Request.Files["FileData"]; 
string uploadpath = Server.MapPath(Request["folder"] + "\\"); 
if (file != null) 
{ 
if (!Directory.Exists(uploadpath)) 
{ 
Directory.CreateDirectory(uploadpath); 
} 
file.SaveAs(uploadpath + file.FileName); 
Response.Write("1"); 
} 
else 
{ 
Response.Write("0"); 
} 
} 
} 
}

D.upload这个文件加也是必需
3.运行结果:

   JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

4.最后说说:这个只是一个简单的入门例子,至于界面可以根据自己的需要去改

Javascript 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
React如何避免重渲染
Apr 10 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 #Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 #Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 #Javascript
jQuery 入门级学习笔记及源码
Jan 22 #Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 #Javascript
Jquery实战_读书笔记2 选择器
Jan 22 #Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 #Javascript
You might like
php中this关键字用法分析
2016/12/07 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
python中使用%与.format格式化文本方法解析
2017/12/27 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python查看模块,对象的函数方法
2018/10/16 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
合作投资意向书
2014/04/01 职场文书
房产授权委托书范本
2014/09/22 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
成绩报告单家长评语
2014/12/30 职场文书
办公室个人总结
2015/02/28 职场文书
管理失职检讨书范文
2015/05/05 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电