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事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
JavaScript实例 ODO List分析
Jan 22 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
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
js实现抽奖效果
2017/03/27 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
十个Python程序员易犯的错误
2015/12/15 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
世界上最大的二手相机店:KEN
2017/05/17 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
请解释在new与override的区别
2012/10/29 面试题
Shell编程面试题
2012/05/30 面试题
退伍老兵事迹材料
2014/01/31 职场文书
学员自我鉴定
2014/03/19 职场文书
什么是就业协议书
2014/04/17 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS