Jquery Uploadify上传带进度条的简单实例


Posted in Javascript onFebruary 12, 2014
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Jquery Uploadify上传带进度条</title>
    <link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
    <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#uploadify").uploadify({
                'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径
                'script': 'UploadHandler.ashx', //处理文件上传的后台脚本的路径
                'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
                'folder': 'UploadFile/<% = subpathName %>', //上传文件夹的路径
                'queueID': 'fileQueue', //页面中,你想要用来作为文件队列的元素的id
                'auto': false, //当文件被添加到队列时,自动上传
                'multi': true, //设置为true将允许多文件上传
                'fileExt': '*.jpg;*.gif;*.png', //允许上传的文件后缀
                'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'sizeLimit': 102400,  //上传文件的大小限制,单位为字节 100k
                'onCancel': function (event, ID, fileObj, data) { //当从上传队列每移除一个文件时触发一次
                    alert('The upload of ' + fileObj.name + ' has been canceled!');
                },
                'onComplete': function (event, ID, fileObj, response, data) { //每完成一次文件上传时触发一次
                    alert('There are ' + data.fileCount + ' files remaining in the queue.');
                },
                'onAllComplete': function (event, data) { //当上传队列中的所有文件都完成上传时触发
                    alert(data.filesUploaded + ' files uploaded successfully!');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>

    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
        <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
        <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
    </p>
</body>
</html>

<%@ WebHandler Language="C#" Class="UploadHandler" %>
using System;
using System.Web;
using System.IO;
public class UploadHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";
        HttpPostedFile file = context.Request.Files["Filedata"];
        string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);
        if (file != null)
        {
            if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }
            file.SaveAs(Path.Combine(uploadPath, file.FileName));
            context.Response.Write("1");
        }
        else
        {
            context.Response.Write("0");
        }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
Javascript 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
js弹出div并显示遮罩层
Feb 12 #Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 #Javascript
jquery实现网页查找功能示例分享
Feb 12 #Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 #Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 #Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 #Javascript
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
javascript的事件描述
2006/09/08 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
微信小程序switch组件使用详解
2018/01/31 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python中请不要再用re.compile了
2019/06/30 Python
django 简单实现登录验证给你
2019/11/06 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
优秀学生事迹材料
2014/02/08 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
节能环保口号
2014/06/12 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
MySQL分区以及建索引的方法总结
2022/04/13 MySQL