附件上传功能一般使用

实现，但是这个功能是在太弱，无法做到很多实际应用中需要的效果。而flash上传功能就强大很多，可以实现很多我们想要的效果。这里我就推荐一个很好的上传插件——swfupload。

swfupload是一个客户端上传工具，整合了javascript与flash技术，他的特点有：

可以同时上传多个文件；

类似AJAX的无刷新上传；

可以显示上传进度；

良好的浏览器兼容性；

兼容其他JavaScript库 (例如：jQuery, Prototype等)；

支持Flash 8和Flash 9；

swfupload包括三部分的内容：swfupload.js、swfupload.swf、初始化配置参数及各种事件处理函数。所以首先在页面引入swfupload.js

然后在页面中实例化swfupload对象

var swfu;

window.onload = function() {

var settings = {

flash_url : "http://192.168.1.72/swfupload/swfupload.swf",

upload_url: "http://192.168.1.72/swfupload/upload.php", // Relative to the SWF file

post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},

file_size_limit : "500 MB",

file_types : "*.jpg;*.gif;*.jpeg;*.png;*.rar;",

file_types_description : "All Files",

file_upload_limit : 100, //最大上传数量

file_queue_limit : 0,

custom_settings : {

progressTarget : "fsUploadProgress",

cancelButtonId : "btnCancel"

},

debug: false,

// Button settings

button_image_url: "images/TestImageNoText_65x29.png", // Relative to the Flash file

button_width: "65",

button_height: "29",

button_placeholder_id: "spanButtonPlaceHolder",

button_text: '浏览',

button_text_style: ".theFont { font-size: 16; }",

button_text_left_padding: 12,

button_text_top_padding: 3,

// The event handler functions are defined in handlers.js

file_queued_handler : fileQueued,

file_queue_error_handler : fileQueueError,

file_dialog_complete_handler : fileDialogComplete,

upload_start_handler : uploadStart,

upload_progress_handler : uploadProgress,

upload_error_handler : uploadError,

upload_success_handler : uploadSuccess,

upload_complete_handler : uploadComplete,

queue_complete_handler : queueComplete // Queue plugin event

};

swfu = new SWFUpload(settings);

};

我们发现这里面有大量的参数属性要设置，接下俩就介绍一下这些参数分别是什么

属性

类型

默认值

描述

String

处理上传文件的服务器端页面的url地址，可以是绝对地址，也可以是相对地址，当为相对地址时相对的是当前代码所在的文档地址

Boolean

false

如果为false则SWFUpload会把swfupload.swf用到的相对地址转换为绝对地址，以达到更好的兼容性

String

Filedata

相当于用普通的文件域上传文件时的name属性，服务器端接收页面通过该名称来获取上传的文件

Object(直接量)

一个对象直接量，里面的键/值对会随着每一个文件一起上传，文件上传要附加一些信息时很有用

Boolean

false

为false时,post_params属性定义的参数会以post方式上传；为true时，则会以get方式上传(即参数会以查询字符串的形式附加到url后面)

String

该属性指定了允许上传的文件类型，当有多个类型时使用分号隔开，比如：*.jpg;*.png ,允许所有类型时请使用 *.*

String

指定在文件选取窗口中显示的文件类型描述，起一个提示和说明的作用吧

String

指定要上传的文件的最大体积，可以带单位，合法的单位有:B、KB、MB、GB，如果省略了单位，则默认为KB。该属性为0时，表示不限制文件的大小。

Number

指定最多能上传多少个文件，当上传成功的文件数量达到了这个最大值后，就不能再上传文件了，也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。

Number

指定文件上传队列里最多能同时存放多少个文件。当超过了这个数目后只有当队列里有文件上传成功、上传出错或被取消上传后，等同数量的其他文件才可以被添加进来。当file_upload_limit的数值或者剩余的能上传的文件数量小于file_queue_limit时，则取那个更小的值

String

swfupload.swf文件的绝对或相对地址，相对地址是指相对于当前的页面地址。实例化swfupload后，就不能再改变该属性的值了。

Boolean

为true时会加一个随机数在swfupload.swf地址的后面，以阻止flash影片被缓存，这是为了防止某些版本的IE浏览器在读取缓存的falsh影片时出现的bug

String

指定一个dom元素的id,该dom元素在swfupload实例化后会被Flash按钮代替，这个dom元素相当于一个占位符

DOMElement

指定一个dom元素,该dom元素在swfupload实例化后会被Flash按钮代替，这个dom元素相当于一个占位符。当button_placeholder_id与button_placeholder都存在时，以button_placeholder_id为优先

String

指定Flash按钮的背景图片，相对地址或绝对地址都可以。该地址会受到preserve_relative_urls属性的影响，遵从与upload_url一样的规则。

该背景图片必须是一个sprite图片,从上到下包含了Flash按钮的正常、鼠标悬停、按下、禁用这四种状态。因此该图片的高度应该是Flash按钮高度的四倍

Number

指定Flash按钮的宽度

Number

指定Flash按钮的高度，应该为button_image_url所指定的按钮背景图片高度的1/4

String

指定Flash按钮上的文字，也可以是html代码

String

Flash按钮上的文字的样式，使用方法见示例

Number

指定Flash按钮顶部的内边距，可使用负值

Number

指定Flash按钮左边的内边距，可使用负值

Boolean

false

为true时Flash按钮将变为禁用状态，点击也不会触发任何行为

指定鼠标悬停在Flash按钮上时的光标样式，可用值为SWFUpload.CURSOR里定义的常量

指定Flash按钮的WMODE属性，可用值为SWFUpload.WINDOW_MODE里定义的常量

Function

fileDialogStart事件侦听函数

Function

fileQueued事件侦听函数

Function

fileQueueError事件侦听函数

Function

fileDialogComplete事件侦听函数

Function

uploadStart事件侦听函数

Function

uploadProgress事件侦听函数

Function

uploadError事件侦听函数

Function

uploadSuccess事件侦听函数

Function

uploadComplete事件侦听函数

注：文档上虽然说明uplaod_url和flash_url设置的路径可以使相对地址也可以是绝对地址，但是经过笔者的实际测试，如果设置的是相对地址，可能会出现一些未知的错误，如笔者出现的某些格式文件无法上错的错误！

服务器端交互

上文中提到有upload_url参数，这里设置的地址，就是客户端与服务器端交互的地方

在Demo的upload.php中，已经写好了图片上传的功能(即将你所上传的附件移动到你设置的$save_path中)；

这里我介绍一下直接与数据库交互，即在图片上传完成之后将图片存储地址存入数据库中

找到upload.php的165行左右，找到这段代码：

if (!@move_uploaded_file($_FILES[$upload_name]["tmp_name"], $save_path.$savefilename)) {

HandleError("文件无法保存.");

exit(0);

}

在这段代码下面添加代码：

try {

$db = new PDO('mysql:host=localhost;dbname=upload', 'root', 'root');

$db->exec('set names utf8;');

} catch (PDOException $e) {

print "Error: " . $e->getMessage() . "
";

die();

}

$imgurl = $save_path.$file_name;

$db->exec("INSERT INTO yunwei_file (`name`, `newname`, `size`, `type`) VALUES ('$file_name', '$savefilename', '$file_size', '$type')");

这样就可以将上传的附件信息存入数据库

有些时候需要将存入数据库的这条信息的id返回做操作，在上面的代码下面增加

$id = $db->lastinsertid();

echo $id;

接下来我们需要找到插件定义的那些监听函数了，在handlers.js中

handlers.js中初始化了很多监听函数，如上传成功后执行的uploadSuccess()；上传中的函数uploadProgress()；上传开始的函数uploadStart()；

我们期望的是对uploadSuccess()操作

function uploadSuccess(file, serverData) {

try {

var progress = new FileProgress(file, this.customSettings.progressTarget);

progress.setComplete();

progress.setStatus("上传成功");

progress.toggleCancel(false);

} catch (ex) {

this.debug(ex);

}

}

在这段代码中增加下面的代码段

var id = parseInt(serverData);

var file = document.createElement("input");

file.type="hidden";

file.name="files[]";

file.value=id;

document.getElementById("files_id").appendChild(file);

这样就会在前台生成一个hidden属性的input框，他的value值就是刚刚添加进数据库信息的id。

至此，我们希望做到的事就全部完成了。来看效果图：

当然swfupload还有很多强大的功能笔者还没提及，感兴趣的看客可以自行研究，此处附上swfupload的官方使用文档。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/4825.html

微信打赏

支付宝打赏

感谢您对作者wangquan的打赏，我们会更加努力！    如果您想成为作者，请点我