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

最新推荐文章于 2020-03-03 10:05:48 发布

diehe5608

最新推荐文章于 2020-03-03 10:05:48 发布

阅读量77

点赞数

文章标签： javascript c# xhtml ViewUI

原文链接：http://www.cnblogs.com/smartsmile/p/6234239.html

版权

<%@ 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\" οnclick=\"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);" οnclick="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;
        }
    }
}

转载于:https://www.cnblogs.com/smartsmile/p/6234239.html

diehe5608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery.Uploadify实现批量上传显示进度条取消上传后缩略图显示可删除

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="s...
复制链接

扫一扫