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

原创 2013年12月05日 17:39:48
<%@ 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;
        }
    }
}

版权声明:本文为博主原创文章,未经博主允许不得转载,如文章对您有帮助,请页面左侧随意打赏。

实现图片上传预览和取消文件上传功能

问题由来:自己开发的一个预约系统要实现上传图片预览,自己费了九牛二虎之力,加上查资料才实现功能。下面我的实现思路。 预览功能: 1.首先需要定义一个事件,这个文件选择框发生改变,就触发这个方法,我这里...
  • lkwan123
  • lkwan123
  • 2017年06月01日 15:51
  • 1102

图片上传带预览进度条与删除

  • 2013年11月04日 17:22
  • 48KB
  • 下载

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例。

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例。
  • u012015434
  • u012015434
  • 2016年07月21日 11:47
  • 6069

带进度条的文件上传,附带显示上传文件的列表,并且能删除已上传文件.rar

  • 2014年12月26日 17:11
  • 358KB
  • 下载

PHP+jQuery带进度条和删除的异步多文件上传插件

  • 2011年11月27日 22:04
  • 44KB
  • 下载

Jquery Uploadify上传带进度条

Jquery Uploadify上传带进度条 $(document).ready(function () { ...
  • smartsmile2012
  • smartsmile2012
  • 2013年01月10日 14:31
  • 6792

jquery.uploadify插件与java web的结合实现多文件上传+进度条

load1.jsp 上传页面:     pageEncoding="UTF-8"%> String path = request.getContextPath(); Str...
  • Java_lilin
  • Java_lilin
  • 2013年03月27日 15:59
  • 1927

uploadify取消文件上传

最近这两天项目中用到了uploadify(文件上传),在这里进行一个总结uploadifyuploadify是一个基于JQuery的文件上传插件,有免费版和收费版两个版本,其中免费版采用了flash,...
  • benjaminlee1
  • benjaminlee1
  • 2016年11月20日 21:06
  • 2700

上传插件,较轻量级,带进度条 jquery.uploadify

ReferenceError: ROOT_PATH is not defined 'swf' : ROOT_PATH+'resources/js/upl...
  • sunhuwh
  • sunhuwh
  • 2014年05月27日 04:33
  • 4802

uploadify多图上传,带缩略图预览删除按钮

其实这个多图上传很久以前就用了,只是自己最近懒没发帖。 话不多说了。 我直接上图。 项目文件。 选择文件。 上传文件。 这样就完成了上传。上传完成后会在文...
  • xiangyuan1988
  • xiangyuan1988
  • 2015年06月23日 17:58
  • 4758
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
举报原因:
原因补充:

(最多只允许输入30个字)