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 select控制插件
Aug 17 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
原生js实现分页效果
Sep 23 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生成随机颜色的方法
2014/11/13 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
XML的代替者----JSON
2007/07/21 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Python实现获取命令行输出结果的方法
2017/06/10 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
python 装饰器的基本使用
2021/01/13 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
学校经典推荐信
2013/10/30 职场文书
体育教师自荐信范文
2013/12/16 职场文书
中学生个人自我评价
2014/02/06 职场文书
情人节寄语大全
2014/04/11 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
python实现过滤敏感词
2021/05/08 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS