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

最新推荐文章于 2019-05-24 16:57:35 发布

duomuer

最新推荐文章于 2019-05-24 16:57:35 发布

阅读量5.6k

点赞数 1

文章标签： asp.net jquery uploadify 上传图片缩略图

本文链接：https://blog.csdn.net/c_yang13/article/details/46700613

版权

本文为原创文章，欢迎转载！转载时请注明出处：http://blog.csdn.net/c_yang13

一、准备工具

1.jquery，我使用的是jquery-1.11.3.min.js

2.uploadify插件，到Uploadify官网下载即可，解压后发现有几个php文件，这是官方使用php语言做的一个例子，因为我要在asp.net下使用uplodify插件，所以把这几个php文件删掉了，删除后的目录如下：

Uploadify插件提供了很多参数和回调方法，这里Uploadify参数详解有个博主做了详细说明。

我把jquery和uplodify整个文件夹放在了网站的js目录下，如下图：

注意其中的swfobject.js不是uploadify提供的，在网上查资料的时候发现很多人都加了这个，我就下载了个，貌似不加也没什么影响，下面是从别处复制过来的对swfobject.js用途的介绍：

1.IE中没有讨厌的虚框问题了。
2.提供了完善的版本检测功能，如果版本不够则显示其他东西，比如图片或文字。
3.易于使用，只要在页面头加载一个 .js 文件，然后 HTML 写一个容器，里面放普通的文本或图片（用于无法显示 Flash 时显示），最后用脚本来替换这个元素里面的内容为 Flash。
4.使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。
5.能够避免HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。

二、创建文件

1.UploadImage.aspx：上传图片的主页面

2.UploadImage.ashx：将图片存入指定目录的一般处理程序

3.GetImage.ashx：获得已上传图片的一般处理程序

4.DeleteImage.ashx：删除所选图片的一般处理程序

5.UploadFile目录，存放上传的图片

整个工程的目录如下：

三、编写程序

先从被调用者，即后台部分开始

1.UploadImage.ashx

每上传一张图片就会调用此程序，将当前上传的图片存入UploadFile目录，我给图片重命名的时候精确到了微秒，因为这个uploadify上传文件太快了，一秒内能够上传好几张图片，如果精确到秒，很多图片就会重名，然后就被覆盖掉了，选择了10张图片上传也许实际上就上传了2张= =，不知道有无更好的重命名办法。不过在前台用checkExisting检查一下重复性也是极好的，这个可以根据需要选择。

using System;
using System.Web;
using System.IO;

public class UploadImage : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";
        HttpPostedFile file = context.Request.Files["Filedata"];//接收上传后的文件
        string uploadPath = HttpContext.Current.Server.MapPath("UploadFile" + "\\");//设置文件的保存路径
        //判断上传的文件是否为空
        if (file != null)
        {
            //判断目录是否存在，不存在则创建
            if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }
            //重新设置文件名，防止覆盖掉重名的图片
            string[] f = file.FileName.Split('.');//根据.将字符串分割为字符串数组
            string ext = f[f.Length - 1];//文件扩展名
            string fileName = DateTime.Now.ToString("yyyyMMddhhmmssffffff") + "." + ext;//精确到微秒，秒不够！
            file.SaveAs(uploadPath + fileName);
            context.Response.Write("1");
        }
        else
        {
            context.Response.Write("0");
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

2.GetImage.ashx

当主页面UploadImage.aspx载入的时候，调用此程序以展示UploadFile中的所有图片；当图片上传完毕后，调用此程序以更新图片显示。（这个就是根据需要调用了）

using System;
using System.Web;
using System.IO;
using System.Collections.Generic;

public class GetImage : IHttpHandler {

    string[] imgPattern = { "*.gif", "*.jpg", "*.png" };//就是只从指定目录搜索这些后缀的文件，这个一定要和前台参数fileTypeExts的值一致。
    string imgPath = "UploadFile/";//搜索路径
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        context.Response.Write(ConvertToJson(getImages(imgPath, imgPattern)));//记得把返回给前台的List<string>对象转化成Json字符串
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
    
    //获取指定路径下的所有图片
    private List<string> getImages(string path, string[] searchPatterns)
    {
        DirectoryInfo imagesfile = new DirectoryInfo(HttpContext.Current.Server.MapPath(path));
        FileInfo[] files = imagesfile.GetFiles();
        List<string> tempFiles = new List<string>();//记录图片文件的名称
        foreach (FileInfo file in files)
        {
            if (Array.IndexOf(searchPatterns, "*" + file.Extension) >= 0)
            {
                tempFiles.Add(file.Name);//如果是图片就存起来
            }
        }
        return tempFiles;
    }
    
    //将object转换成json字符串
    public string ConvertToJson(object obj)
    {
        return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(obj);
    }
}

3.DeleteImage.ashx

当点击图片下方的“删除”按钮时调用此程序，删除一个图片要做两件事：1.告诉后台把该图片从存放目录删除 2.后台将图片成功删除后，要通知前台，清除其缩略图。

所以这个程序需要接收一个参数，同时还要回传一个参数，这两个参数值是一样的，都是当前操作的图片名fileName

using System;
using System.Web;
using System.IO;
public class DeleteImage : IHttpHandler {

    string imgPath = "UploadFile/";//图片存放的目录
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        //string fileName = context.Request.QueryString["fileName"];//针对Get请求，建议使用Post请求，因为Get会缓存数据，会出现问题。
        string fileName = context.Request.Form["fileName"];//针对Post请求
        string filePath = HttpContext.Current.Server.MapPath(imgPath + fileName);
        if (File.Exists(filePath))
        {
            File.Delete(filePath);
            context.Response.Write(ConvertToJson(fileName));//回传删除图片的名称,必须转化成Json字符串才能被前台获取到
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    //将object转换成json字符串
    public string ConvertToJson(object obj)
    {
        return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(obj);
    }
}

后台程序写好，主页面就可以很方便的调用了，当然在实际的开发中，我是想到哪写到哪= =

4.UploadImage.aspx

（1）引入相关文件

<link type="text/css" rel="Stylesheet" href="js/uploadify/uploadify.css" />    //用来控制上传按钮的样式、包括进度条的显示等
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>  //强大的JS库，兼容各种浏览器，提供各种功能，包括创建修改HTML元素、操作CSS、实现Ajax等等
<script type="text/javascript" src="js/uploadify/jquery.uploadify.js"></script>  //uploadify的核心部分
<script type="text/javascript" src="js/uploadify/swfobject.js"></script> //引入swfobject.js

（2）body部分，主要做以下工作：

1.添加一个file类型的Input控件，用来点击浏览图片

2.添加“上传”和“取消”按钮，注意加*表示点击”上传“之后一次性上传选择的所有图片，否则，即使选择了多个图片，每次点击也只上传一个图片。

3.添加一个div用来存储上传队列，展示上传进度条，我不想显示那些进度条，所以就把这个div给隐藏掉了。。。

4.添加一个div用来展示图片，注意我实现的上传后预览，而且是预览已上传的所有图片，且实现的效果是：每行显示5张图片，每个图片100px：100px,所以这个div的宽度设置成600px就够用了，然后高度就是根据内容自动增长。

<body>
    <form id="form1" runat="server">
    <div style=" margin:0 auto; width:700px; border:1px; border-style:solid; border-color:Silver;">
        <input type="file" name="uploadify" id="uploadify" />
        <p>
            <a id="upload" href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>|
            <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a>
        </p>
        <div id="fileQueue" style=" visibility:hidden; width:600px; height:1px; overflow:hidden;"></div>
        <div id="preDiv" style=" margin:0 auto; border:1px; border-style:solid; border-color:Silver; width:600px; height:auto;">
        </div>
        <br />
    </div>
    </form>
</body>

（3）js部分，这个部分是最关键的，主要做了以下几件事：

1.点击”浏览图片“选择一张或多张图片（进度条也是在这之后生成的）；

2.点击”上传“，将选择的图片上传到指定的目录；

3.点击”取消上传“，清空上传队列（进度条会消失~）；

4.所选图片上传完毕后，在下方显示已上传的所有图片；

5.点击某个图片下面的“删除”按钮，删除该图片。

1、3设置uploadify提供的相应参数即可实现的，2、4、5还需要编写相应的后台处理程序。

<script type="text/javascript">
        $(document).ready(function () {
            createPreImage();
            $("#uploadify").uploadify({
                'auto': false, //设置选择图片之后是否立即上传，我设置的是false,就是只有在点击了”上传“按钮之后才上传图片
                'swf': 'js/uploadify/uploadify.swf', //uploadify.swf 文件的相对路径。
                'uploader': 'UploadImage.ashx', //后台处理程序的相对路径。
                'folder': 'UploadFile', //存储图片的相对路径
                'queueID': 'fileQueue', //设置上传队列容器DOM元素的ID
                'buttonText': '浏览图片', //上传按钮的文字
                'width': 100, //上传按钮的高和宽
                'height': 30,
                'removeTimeout': 0, //表示上传完成后多久删除队列中的进度条，默认为3
                'removeCompleted': true, //是否自动将已完成任务从队列中删除
                //'checkExisting': true, //文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，因为我已经后台给所有上传的文件重命名，就没有设置这个属性
                "fileSizeLimit": "4096KB", //上传文件大小限制，默认单位是KB
                "fileTypeExts": "*.jpg;*.gif;*.png", //指定允许上传的文件类型。默认*.*
                'onQueueComplete': createPreImage, //文件上传队列处理完毕后触发函数createPreImage()
                'multi': true //可以选择多个文件
            });
        });
        //下面这个函数在onQueueComplete中调用，主要做两件事：1.根据后台返回的数据动态生成缩略图 2.给每个图片对应的“删除”按钮绑定Click事件
        function createPreImage() {
            $.post("GetImage.ashx", function (data, status) {
                $("#preDiv").empty();//先清空div
                for (var i = 0; i < data.length; i++) {
                    var newDiv = $("<div></div>").addClass("cell");//创建子div
                    var newImg = $("<img/>").addClass("imgSyle");//创建img,用于展示图片
                    var newDel = $("<a>删除</a>").addClass("delSyle");//创建<a>，用于删除图片
                    var newHidden = $("<input type=\"hidden\"/>").attr("value", data[i]);//创建<input>，存储图片名称，用于向后台传递参数
                    newImg.attr("src", "UploadFile/" + data[i]); //设置图片的src
                    newDel.bind("click", function () {
                        delDiv = $(this).parent(); //先获取父级元素，在下面remove才有效
                        //$(this).parent().find("input").attr("value");//返回newDel的直接父元素的Input类型的子元素√
                        var fname = $(this).next().attr("value");//返回newDel元素的下一个同胞元素√
                        $.post("DeleteImage.ashx", { fileName: fname }, function (res, state) {
                            if (state == "success" && res != "") {
                                //$(this).parent().remove();//不起作用
                                //$("#" + bn).remove();//√，需要给父级元素设置id
                                delDiv.remove(); //√
                            }
                        });
                    });
                    newDiv.append(newImg);//将newImg、newDel、newHidden放到newDiv中，每读取一个图片就创建一个newDiv；每删除一个图片就删除其对应的newDiv
                    newDiv.append(newDel);
                    newDiv.append(newHidden);
                    $("#preDiv").append(newDiv);//将newDiv放到preDiv中
                }
            });
        }
    </script>

（4）Style部分，我在这部分简单设置了下图片显示的样式

<style type="text/css">
        .cell
        {
            position:relative;
            width:120px;
            height:130px;
            display:inline-block;
        }
        .imgSyle
        {
            display:block;
            margin:0 auto;
            width:100px;
            height:100px;
            margin-top:5px;
        }
        .delSyle
        {
            display:block;
            margin:0 auto;
            margin-top:5px;
            width:40px;
            height:15px;
            line-height:15px;
            outline: none;
            text-decoration:none;
            color:Gray;
            text-align:center;
            background-color:ButtonFace;
            border:1px solid Silver;
        }
   </style>

四、处理bug

按照上述步骤创建程序之后，在firework浏览器中可以正常运行，但是在IE9中点击“浏览图片”按钮居然没有反应! 解决方法如下：

在jquery.uploadify.js文件中找到SWFUpload.prototype.getFlashHTML函数，给其返还的object标签添加一个classid属性，修改后的代码如下：

SWFUpload.prototype.getFlashHTML=function(){return['<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="',this.movieName,'" type="application/x-shockwave-flash" data="',this.settings.flash_url,'" width="',this.settings.button_width,'" height="',this.settings.button_height,'" class="swfupload">','<param name="wmode" value="',this.settings.button_window_mode,'" />','<param name="movie" value="',this.settings.flash_url,'" />','<param name="quality" value="high" />','<param name="menu" value="false" />','<param name="allowScriptAccess" value="always" />','<param name="flashvars" value="'+this.getFlashVars()+'" />',"</object>"].join("")};

OK，大功告成= =！下面附上效果图