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 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
jquery实现手风琴案例
May 04 jQuery
原生微信小程序开发中 redux 的使用详解
Feb 18 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
django中的数据库迁移的实现
2020/03/16 Python
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
Android面试题及答案
2015/09/04 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
社区母亲节活动方案
2014/03/05 职场文书
医德医风演讲稿
2014/05/20 职场文书
爱心捐款感谢信
2015/01/20 职场文书
毕业论文致谢范文
2015/05/14 职场文书
中学政教处工作总结
2015/08/13 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
入党转正申请书范文
2019/05/20 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js