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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
常用jQuery选择器总结
Jul 11 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
使用jquery如何获取时间
Oct 13 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
15个顶级开源JavaScript框架和库
Oct 10 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
小程序双头slider选择器的实现示例
Mar 31 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 登录记住密码实现思路
2013/05/07 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python 创建TCP服务器的方法
2020/07/28 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
秋季运动会稿件
2014/01/30 职场文书
学雷锋的心得体会
2014/09/04 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python