<%@ 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 () {

            $("#pics").hide();

            $("#uploadify").uploadify({

                'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径

                'script': 'UploadHandler.ashx?type=add', //处理文件上传的后台脚本的路径

                'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',

                'buttonText': 'Select Image',

                'folder': 'UploadFile/<% = DateTime.Now.ToString("yyyyMMdd") %>/', //上传文件夹的路径按20130416

                'queueID': 'fileQueue', //页面中，你想要用来作为文件队列的元素的id

                'auto': false, //当文件被添加到队列时，自动上传

                'multi': true, //设置为true将允许多文件上传

                'fileExt': '*.jpg;*.gif;*.png', //允许上传的文件后缀

                'queueSizeLimit': 5,

                'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在浏览窗口底部的文件类型下拉菜单中显示的文本

                'sizeLimit': 1024000,  //上传文件的大小限制，单位为字节 1024*1000 1M

                'onComplete': function (event, queueID, fileObj, response, data) {

                    var html = "";

                    html += "    <li class=\'myli\'>";

                    html += "    <img src=\"" + response + "\" class=\'myimg\'/>";

                    html += "    <div style=\" position:absolute; right:8px; bottom:5px\">";

                    html += "        <img title=\"点击删除\" src=\"Images/delete.gif\" onclick=\"delImage(\'" + response + "\');\" />";

                    html += "    </div>";

                    html += "    </li>";

                    $("#pics").append(html);

                },

                'onAllComplete': function (event, data) { //当上传队列中的所有文件都完成上传时触发

                    //alert(data.filesUploaded + ' 个文件上传成功!');

                    $("#pics").fadeIn();

                }

            });

        });

        function uploadpara() {

            //自定义传递参数

            $('#uploadify').uploadifySettings('scriptData', { 'name': $('#txtName').val(), 'albums': $('#txtAlbums').val() });

            $('#uploadify').uploadifyUpload();

        }

        function delImage(picurl) {

            jsonAjax("UploadHandler.ashx", "type=del&picurl=" + picurl, "text", callBackTxt);

        }

        function jsonAjax(url, param, datat, callback) {

            $.ajax({

                type: "post",

                url: url,

                data: param,

                dataType: datat,

                success: callback,

                error: function () {

                    jQuery.fn.mBox({

                        message: '恢复失败'

                    });

                }

            });

        }

        function callBackTxt(data) {

            var o = data;

            if (o != "") {

                var e = $(".myli img[src='" + data + "']");

                e.each(function () {

                    $(this).parent().remove();

                })

            } else {

                alert("删除失败");

            }

        };

    </script>

    <style type="text/css">

    .myul

    {

      margin:5px 5px 5px 5px;

      padding:0px;

    }

    .myli

    {

        list-style-type:none;

        width:150px;

        height:150px;

        display:inline;

        position:relative;

    }

    .myimg

    {

        width:120px;

        height:120px;

    }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <div id="fileQueue"></div>

    <input type="file" name="uploadify" id="uploadify" />

    <div id="pics">

    <ul class="myul">

    </ul>

    </div>

    <div>

    <p>

        <a href="javascript:void(0);" onclick="uploadpara();">上传</a>|

        <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>

    </p>

    </div>

    </div>

    </form>

</body>

</html>

<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;

using System.Web;

using System.IO;

/// <summary>

/// UploadHandler文件上传

/// </summary>

public class UploadHandler : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        context.Response.Charset = "utf-8";

        string type = context.Request["type"];

        if (type=="add")

        {

            HttpPostedFile file = context.Request.Files["Filedata"];

            string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);

            string name = context.Request.Params["name"]; //获取传递的参数

            string albums = context.Request.Params["albums"];

            if (file != null)

            {

                if (!Directory.Exists(uploadPath))

                {

                    Directory.CreateDirectory(uploadPath);

                }

                file.SaveAs(Path.Combine(uploadPath, file.FileName));

                context.Response.Write(@context.Request["folder"] + file.FileName);

            }

            else

            {

                context.Response.Write("");

            }

        }

        else if (type == "del")

        {

            string picurl = context.Request["picurl"];

            try

            {

                File.Delete(context.Server.MapPath(picurl));

                context.Response.Write(picurl);

            }

            catch

            {

                context.Response.Write("");

            }

        }

        else

        { }

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除的更多相关文章

  1. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  2. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  3. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  4. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  5. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  6. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  7. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  8. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  9. Springboot 文件上传(带进度条)

    1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

随机推荐

  1. 解决Android Studio中Refreshing gradle project时间过长的最简单方法

    Refreshing gradle project往往出现在Gradle出现更新,需要从墙外的网重新拖下来的前提下.具体可以查看以下文件:/path/to/project/gradle/wrapper ...

  2. JavaScript中你所不知道的Object（二）--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  3. 微软为啥让免费升Win10？

           今天终于赶在截止日期之前把我的联想PC升到win10.微软这次对中国开放的持续一年的免费升级活动主要有两个原因.首先当然是"感恩Windows用户长久支持的回馈".微 ...

  4. 团队作业2——需求分析&原型设计

    Deadline: 2017-4-14 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以上 - ...

  5. 201521123083《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  6. 结对编程1---四则运算---GUI

    201421123003 黄建英 201421123004 黄美海 题目描述: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是Window ...

  7. 个人作业2————英语学习APP的案例分析

    必应词典案例分析 第一部分 调研, 评测 1.下载并使用 第一次使用必应词典,安装完打开便是这样的界面,第一印象还行,界面平平无奇,比较简洁,上面分四个模块,这样一眼看去感觉功能比较单一 使用了下例句 ...

  8. 201521123066《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结** 用cont ...

  9. eclipse: eclipse导入工程出现大红叹号

    总结: 问题原因:工程中classpath中指向的包路径错误 解决办法:到BUILDPATH CONFIG````中,liberaies中 出现红色叉号的包为路径错误的包.到classpath中修改相 ...

  10. 从JS和jQuery浅谈DOM操作，当我们在获取时，究竟获取了什么

    0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...