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实现的页面关键字密度查询代码
Dec 27 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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
php中实现简单的ACL 完结篇
2011/09/07 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
抽象类和接口的区别
2012/09/19 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
销售队伍口号
2014/06/11 职场文书
国际会计专业求职信
2014/08/04 职场文书
党员自我对照检查材料
2014/08/19 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书