<%@ 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. PHP（函数）

    <script> // 获得日 var time = new Date(); var x = time.getDate(); document.write(x+"日," ...

  2. 五,ESP8266 TCP服务器多连接

    一些时间去准备朋友的元器件了... 接着写,,争取今天写完所有的文章,,因为答应了朋友下周5之前要做好朋友的东西 对于TCP大家在玩AT指令的时候有没有发现客户端最多连接5个,,,再连接就不行了?? ...

  3. 【★】EIGRP终极解析！

    EIGRP的思维导图 如图,我想采用一种全新的"框架式"教学法,或者叫"盖楼",旨在利用抽象的外部接口,分类分层地介绍各个机制之间的关系.其实任何学习到最后都 ...

  4. 201521123107 《Java程序设计》第2周学习总结

    第2周作业-Java基本语法与类库 1.本周学习总结 要点主要有: (1)String类 String类是本周的一个重点,String类的对象是不可变的,即String对象后就在内存中开辟了一个字符串 ...

  5. 201521123050 《Java程序设计》第8周学习总结

    1. 本周学习总结 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实验总结 在删除元素时,要注意后续元素位置的前移 2.统计文字中的单词数量并按出现次数排序(题目5-3) 2.1 ...

  6. 201521123111《Java程序设计》第7周学习总结

    1. 本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 线性表,栈,队列,哈希表是常用的数据结构 在java.util包中有这些数据结构的实现类.比如:List接口,实现类Arra ...

  7. 201521123121 《JAVA程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  8. 201521123010 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  9. 201521123012 《Java程序设计》第十三周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec ...

  10. 2017JAVA课程设计

    1.团队课程设计博客链接 http://www.cnblogs.com/ltykm/p/7063663.html 2.个人负责模块或任务说明 本人任务:定时器具体功能的实现 3.自己的代码提交记录截图 ...