人所缺乏的不是才干而是志向,不是成功的能力而是勤劳的意志网站位置:博客文章

swfupload无刷新多图片上传

发布时间:2016-12-07编辑:苏剑斌阅读(1521)

SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开 发者提供了一个具有丰富功能继而超越传统input file标签的文件上传模式。

主要特点:(查看demo)


* 可以同时上传多个文件;
* 类似AJAX的无刷新上传;
* 可以显示上传进度;
* 良好的浏览器兼容性;
* 兼容其他JavaScript库 (例如:jQuery, Prototype等);

* 支持Flash 8和Flash 9;

* 实现拖动图片排序

SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和 JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的 在文件上传过程中更新页面内容来营造各种动态效果。

如何实现:


为满足上传图片实时无刷新上传和同一组件重复使用而不冲突,我在网上找了一些资料,用 js+ajax+iframe来实现的效果并没有预想中的那么好。于是在网上找到了swfupload上传工具。

1、引入相关上传需要的文 件js+html

示例代码:



2、初始化组件:

示例代码:

    

3、图片拖动组件:

示例代码:


4、获取图片上传后路径事件:

示例代码:

function addImage(src) {
    var element = $(".file_type").val();
    var newElement = "
  • "; //将获取的文件路径显示到html中,以便php端能够通过POST方法获取到相关值 if(file_queue_limit == 1){ //上传单图 $(".pic_list").html(newElement); }else{ //多图上传 $(".pic_list").append(newElement); } $("img.button").last().bind("click", del); }

    5、php上传处理:

    示例代码:
    
    

    6、示例demo:

    7、示例demo下载:

    超赞的评论 登陆
    1条评论