文档章节

Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

深圳大道
 深圳大道
发布于 2016/12/29 15:39
字数 627
阅读 15
收藏 0
<%@ 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;
        }
    }
}

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/17145357

共有 人打赏支持
深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jQuery File Upload 的基本使用

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 一、最少配置 <!...

不正经啊不正经
2015/01/04
0
0
jQuery 文件上传插件--jQuery File Upload

jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 DEMO:http://...

匿名
2011/03/15
246.4K
6
7 款 JavaScript 的 Ajax 文件上传插件

jQuery File Upload jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端...

oschina
2012/05/09
26K
13
几款极好的 JavaScript 文件上传插件

jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能。 支持预览图片、音频和视频,支持跨域上传和客户端图片缩放,支持的服务端...

hoojo
2013/09/26
0
0
blackfox/ajaxUpload

AjaxUpload @author:yangjian102621@gmail.com 插件描述: javascript异步上传插件,包含3个子项目BUpload, JUpload, TUpload. BUpload : 基于HTML5, UI仿百度编辑器的图片上传, 支持图片上...

blackfox
2016/06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jenkins安装

https://my.oschina.net/u/593517/blog/1797968 jenkins 安装 https://my.oschina.net/u/593517/blog/3028175 GIT 安装 https://my.oschina.net/u/593517/blog/3028179 maven 安装 插件安装 ......

Gm_ning
7分钟前
0
0
小言服务端解决方案-监控

框架保证方向,整体包容细节 为保证服务端运行平稳正常,owner应使得系统应保有相应的监控:系统监控,业务监控。而服务运行的平稳高效是否有保障跟监控粒度又成直接的正比关系。本文仅针对开...

重城重楼
19分钟前
0
0
搜索引擎(Elasticsearch搜索详解)

学完本课题,你应达成如下目标: 掌握ES搜索API的规则、用法。 掌握各种查询用法 搜索API 搜索API 端点地址 GET /twitter/_search?q=user:kimchy GET /twitter/tweet,user/_search?q=user:...

这很耳东先生
42分钟前
6
0
浅谈如何减少GC的次数

GC会stop the world。会暂停程序的执行,带来延迟的代价。所以在开发中,我们不希望GC的次数过多。 本文将讨论如何在开发中改善各种细节,从而减少GC的次数。 (1)对象不用时最好显式置为 Nu...

浮躁的码农
44分钟前
1
0
jpa 自定义返回对象

任何ORM框架都少不了开放自定义sql的问题。jpa自然也不例外,很多场景需要写复杂sql的。 首先定义一个方法签名,然后打上@Query注解。像下面这样,需要注意nativeQuery,这个表示query中的字...

朝如青丝暮成雪
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部