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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
Jquery 效果使用详解
Nov 23 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
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
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python实现计算最小编辑距离
2016/03/17 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Django用户身份验证完成示例代码
2020/04/03 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
简历中自我评价范文3则
2013/12/14 职场文书
小学生暑假感言
2014/02/06 职场文书
建筑安全责任书范本
2014/07/24 职场文书
年底个人总结范文
2015/03/10 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Python re.sub 反向引用的实现
2021/07/07 Python
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技