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;
        }
    }
}

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

相关文章推荐

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

其实这个多图上传很久以前就用了,只是自己最近懒没发帖。 话不多说了。 我直接上图。 项目文件。 选择文件。 上传文件。 这样就完成了上传。上传完成后会在文...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

基于uploadify.js实现多文件上传和上传进度条的显示

uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型、是否自动上传等属性,可以显示上传的进度条。官网地址是http://www.uploadify....

Jquery Uploadify上传带进度条

Jquery Uploadify上传带进度条 $(document).ready(function () { ...

uploadify上传文件,删除文件再上传文件报文件已存在的解决办法

在这个jquery.uploadify.js文件的cancel方法中找到 在相应的位置添加 delete swfuploadify.queueData.files[file.id];这...

asp.net中使用Uploadify插件实现多张图片上传,上传后可显示缩略图、删除图片

一、准备工具: 1.jquery,我使用的是jquery-1.11.3.min.js 2.uploadify插件,到Uploadify官网下载即可,解压后发现有几个php文件,这是官方使用php语...

适用于各浏览器支持图片预览,无刷新异步批量上传js插件(2)

之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是用了些业余时间将它再次优化 以前在上传的时候虽然可以多文件上传,但其实是将所有文件都放到一个form里面同时提交的,这样就造成一个问...
  • sq111433
  • sq111433
  • 2013年11月21日 23:12
  • 66873

C#uploadify只上传图

$(document).ready(function () { $('#AvgFile').uploadify({ 'uploader': '@Url.Cont...

uploadify上传后预览Demo

V层 无标题文档

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
举报原因:
原因补充:

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