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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
javascript的this关键字详解
May 20 Javascript
详解JWT token心得与使用实例
Aug 02 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分页函数
2006/07/08 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
django Admin文档生成器使用详解
2019/07/22 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
食堂标语大全
2014/06/11 职场文书
小学运动会报道稿
2014/10/04 职场文书
初中班主任心得体会
2016/01/07 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书