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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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与javascript对多项选择的处理
2006/10/09 PHP
PHP脚本的10个技巧(7)
2006/10/09 PHP
模仿OSO的论坛(二)
2006/10/09 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
Python星号*与**用法分析
2018/02/02 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
基于python代码批量处理图片resize
2020/06/04 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
实习护士自我鉴定
2013/10/13 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server