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

本文为原创文章，欢迎转载！转载时请注明出处：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();//先清空divfor (var i = 0; i < data.length; i++) {var newDiv = $("<div></div>").addClass("cell");//创建子divvar 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]); //设置图片的srcnewDel.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();//√，需要给父级元素设置iddelDiv.remove(); //√}});});newDiv.append(newImg);//将newImg、newDel、newHidden放到newDiv中，每读取一个图片就创建一个newDiv；每删除一个图片就删除其对应的newDivnewDiv.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，大功告成= =！下面附上效果图

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

Jquery Uploadify插件+Servlet解决FTP多文件上传
这个小程序的起因是老大让我做一个Adobe LiveCycle的外围小程序,附件要随着工作流一起流转用于每级用户审批作为参考.我用.Net2个小时搞完了,被老大通知这个必须用JAVA做-.-无奈之下搞 ...
在Asp.net中使用JQuery插件之jTip
jTip 是个轻量级的提示插件.默认支持两个参数: width宽度,default value :250px link 要link的URL 对应的Source code是: 1: var params ...
uploadify html5 java_工作中碰到uploadify插件两个版本：HTML5和Flash
最近工作中碰到上传文件插件使用问题:在工作中碰到app嵌套html5页面中使用上传文件问题,因为之前使用的是stream上传插件(http://www.twinkling.cn/),但是该插件跨域传输 ...
B/S(WEB)系统中使用websocket插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传)
浏览器下使用websocket插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描并获取图 ...
html表格添加选项代码,使用实例演示表单中的选项卡功能在里面添加table id=bootstrap-table/table后不显示表格...
.time-input{ display: inline; } .add-right{ float: right; font-size: 20px; border: 1px solid #111111 ...
为什么css效果在本地测试没问题,上传到服务器后却显示位置乱动,css下拉菜单本地正常，上传后360浏览器中显示错位，火狐、IE8显示正常...
匿名用户 1级 2014-04-15 回答首先你使用 #header .row-2 ul li:hover 这样ie6就不支持了.ie6支持的hover目前我知道的只有a标签. 要单纯用css实现下 ...
FCKeditor 在ASP.Net 中的使用说明
FCKeditor 在ASP.Net 中的使用说明 FCKeditor 是一个运行在浏览器上的 JavaScript 应用程序.他可以不依赖任何服务器端语言运行.不过,更好的使用方法是你使用一种服务器 ...
DataGrid/DataList在ASP.NET中应用
DataGrid/DataList在ASP.NET中的重要性,想必就不用我再强调了,凡显示Table类型的数据,大多会使用这两个控件(当然,如果谁还像ASP那样写ASP.NET,那我也没有办法),所以 ...
ASP.NET 中使用 Plupload 上传图片
最近弄项目需要一个异步的图片上传图片组件,首先选择了 swfupload,但是在使用中发现火狐下莫名其妙的会丢失 Session(不使用 global.asax 的情况下,没有找到完美的解决方案),后 ...

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

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

最新文章

热门文章