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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
javascript数组详解
Oct 22 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
原生js实现九宫格拖拽换位
Jan 26 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 数组实例说明
2008/08/18 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
smarty自定义函数用法示例
2016/05/20 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
jquery 笔记 事件
2011/11/02 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Python模拟登录12306的方法
2014/12/30 Python
Python单链表简单实现代码
2016/04/27 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
毕业生的自我评价
2013/12/30 职场文书
班组拓展活动方案
2014/08/14 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
关于安全的广播稿
2014/10/23 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015教师年度考核评语
2015/03/25 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
python tqdm用法及实例详解
2021/06/16 Python