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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
js 事件的传播机制(实例讲解)
Jul 20 Javascript
Node.js简单入门前传
Aug 21 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
JavaScript实现雪花飘落效果
Dec 27 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
如何给phpadmin一个保护
2006/10/09 PHP
实用函数10
2007/11/08 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Django中几种重定向方法
2015/04/28 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
python解析多层json操作示例
2019/12/30 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python request操作步骤及代码实例
2020/04/13 Python
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
黄金搭档广告词
2014/03/21 职场文书
信用卡收入证明范本
2015/06/12 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle