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 相关文章推荐
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 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 header()函数语法及使用代码
2013/11/04 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python strip()函数 介绍
2013/05/24 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python实现画循环圆
2019/11/23 Python
python Cartopy的基础使用详解
2020/11/01 Python
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
汽车装潢店创业计划书范文
2014/02/05 职场文书
给小学生的新年寄语
2014/04/04 职场文书
机关办公室岗位职责
2014/04/16 职场文书
三年级小学生评语
2014/04/22 职场文书
工作失误检讨书范文
2015/01/26 职场文书
未中标通知书
2015/04/17 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
php png失真的原因及解决办法
2021/10/24 PHP
python中的getter与setter你了解吗
2022/03/24 Python