使用SWFUpload实现无刷新上传图片
使用SWFUpload实现无刷新上传图片
发布时间:2015-06-09 来源:查字典编辑
摘要:现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点。这里用到的是一...

现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点 。这里用到的是一个插件swfupload 实现无刷新上传图片

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

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

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

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

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

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

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

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

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

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

添加资源引用

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

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

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

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

修改handlers.js文件

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

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

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

最终修改版汇总

使用SWFUpload实现无刷新上传图片7 使用SWFUpload实现无刷新上传图片8 使用SWFUpload实现无刷新上传图片9 使用SWFUpload实现无刷新上传图片10

Thumbnail

?

1

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新编程语言综合学习
热门编程语言综合学习
编程开发子分类