使用SWFUpload实现无刷新上传图片

时间：2021-05-25

在做项目时，需要用到一个图片的无刷新上传，之前听说过SWFUpload，于是想要通过SWFUpload来进行图片的无刷新上传，由于我的项目属于是ASP.NET项目，所以本文着重讲解ASP.NET 的使用，个人感觉示例基本给的很清晰，参考文档进行开发，并非难事

0. 首先下载swfUpload 包，在下载的包中有samples文件夹，samples下有demos文件夹，打开demos文件夹可看到如下图所示结构

我们待会会用到的包括，swfupload目录下的文件，css不建议使用以避免与自己写的CSS相冲突使得页面布局完全乱掉，如果要添加样式最好自己写

打开 applicationdemo.net目录会看到这样的结构

打开index.html可以看到这样的页面

点击NET2.0下的Application Demo C#项

添加资源引用

将要引用的资源包含到项目中（包括swfupload文件夹下的文件与，demo下的资源文件，handlers.js是在demo中js目录下的js文件）

首先熟悉demo，将demo中的页面包含到项目中

在Defaut.aspx页面中使用swfUpload组件进行图片的无刷新上传直接运行，看效果，大概了解基本过程

修改handlers.js文件

我的项目文件结构大概是这样的

我的处理文件上传的页面是ImageUploadHandler.ashx，获取缩略图的页面是GetThumbHandler.ashx,Thumbnail.cs是demo中App_Code文件夹中的文件,个人觉得像这种只处理逻辑功能而不展现页面的最好都用一般处理程序来实现。由于哪个文件处理上传哪个文件生成缩略图已经在handlers.js文件中写死了，所以必须要修改handlers.js文件以能够使页面正常运行

最终修改版汇总

Thumbnail

/// <summary>/// 缩略图/// </summary>public class Thumbnail{ public Thumbnail(string id, byte[] data) { this.ID = id; this.Data = data; } private string id; /// <summary> /// 图片id /// </summary> public string ID { get { return this.id; } set { this.id = value; } } private byte[] thumbnail_data; /// <summary> /// 图片的二进制数据 /// </summary> public byte[] Data { get { return this.thumbnail_data; } set { this.thumbnail_data = value; } } private string contentType; /// <summary> /// 图片对应的MIME类型 /// </summary> public string ContentType { get { return contentType; } set { contentType = value; } }}

Html Demo

<!DOCTYPE html><html xmlns="http://plete"; this.fileProgressElement.childNodes[3].style.width = "";};FileProgress.prototype.setError = function () { this.fileProgressElement.className = "progressContainer red"; this.fileProgressElement.childNodes[3].className = "progressBarError"; this.fileProgressElement.childNodes[3].style.width = "";};FileProgress.prototype.setCancelled = function () { this.fileProgressElement.className = "progressContainer"; this.fileProgressElement.childNodes[3].className = "progressBarError"; this.fileProgressElement.childNodes[3].style.width = "";};FileProgress.prototype.setStatus = function (status) { this.fileProgressElement.childNodes[2].innerHTML = status;};FileProgress.prototype.toggleCancel = function (show, swfuploadInstance) { this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden"; if (swfuploadInstance) { var fileID = this.fileProgressID; this.fileProgressElement.childNodes[0].onclick = function () { swfuploadInstance.cancelUpload(fileID); return false; }; }};

以上所述就是本文的全部内容了，希望对大家学习asp.net能够有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章