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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
node.js中的console用法总结
Dec 15 Javascript
js密码强度实时检测代码
Mar 02 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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
Terran剧情介绍
2020/03/14 星际争霸
PHP 引用文件技巧
2010/03/02 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python 加密与解密小结
2018/12/06 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
电大本科自我鉴定
2014/02/05 职场文书
中学生打架检讨书
2014/02/10 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS