JavaScript插件--Uploadify的使用

时间:2022-10-28 22:38:02

Uploadify插件的使用


Uploadify是一款优秀的文件上传插件。官方网站是:http://www.uploadify.com/download/


Uploadify目前的版本是3.1.1,下面介绍如何在PHP项目中使用Uploadify插件。


1.下载Uploadify插件,解压后如下图所示:

JavaScript插件--Uploadify的使用


2.在HTML文件头部包含所需JS文件,CSS文件。记得包含JQuery

(具体路径根据自己的工程来定)

<link rel="stylesheet" type="text/css" href="__PUBLIC__/Js/lib/uploadify/uploadify.css">

<script type="text/javascript" src="__PUBLIC__/Js/lib/jquery-1.6.4.min.js"></script>


<script type="text/javascript"src="__PUBLIC__/Js/lib/uploadify/jquery.uploadify-3.1.min.js"></script>


3.编写Uploadify的配置文件,比如 imageUpload.js

$(function() {

$('#photoname').uploadify({
'swf' : PUBLIC+"/Js/lib/uploadify/uploadify.swf",
'uploader' : PUBLIC+"/Js/lib/uploadify/uploadify.php",
'cancelImg':PUBLIC+"/Js/lib/uploadify/uploadify-cancel.png",
'debug':true,
'buttonText':'选择照片',
'method':'post',
'buttonClass': 'upload_button',
'fileTypeDesc':'图片文件',
'fileTypeExts':'*.gif;*.jpg;*.png;*.bmp',
'formData':{'public_path':PUBLIC},
'multi':false,

'onUploadComplete':function(file){

},

/**
* 上传成功后触发事件
*/
'onUploadSuccess' : function(file, data, response) {
//参数data保存的是上传后的图片的路径
//alert(data);
//$('#photo').css("background-color","#f00");

var path=PUBLIC+"/Uploads/Photo/"+data;
$('#photo>img').attr("src",path);
$('#photoname_hidden').val(data);
},
});
//alert(PUBLIC);
});

关于上面的代码,说明如下:

  • swf指明SWF文件路径
  • uploader指明后台处理文件路径
  • cancelImg指明取消按钮图片路径
  • debug开启调试模式
  • buttonText按钮上的文字
  • method表示上传表单采用的方式
  • buttonClass为按钮添加额外的样式类
  • fileTypeDesc打开对话框的提示信息
  • fileTypeExts允许上传的文件扩展名
  • formData上传文件之外额外上传的表单数据
  • multi是否支持多文件上传
  • onUploadSuccess上传成功后执行的回调函数
注,还有很多配置参数以及事件,具体可参看Uploadify官方网站。此外,我把官网的文档大概翻译了一下,给出中文版下载:
下载Uploadify3.1中文版参考手册

4.在HTML中的表单代码片段如下:

<p>
<label class="label">照片</label>
<table><tr><td>
<div id="photo"><img src="__PUBLIC__/Uploads/Photo/default.jpg"/></div>
</td></tr></table>
<input class="text-input small-input" type="file" name="photo" id="photoname" />
</p>

<input type="hidden" name="photoname" id="photoname_hidden"/>


5.服务器端PHP代码Uploadify.php


<?php


$targetFolder = $_POST['public_path'].'/Uploads/Photo/'; //上传的目标路径

if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . md5($_FILES['Filedata']['name']);

// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png','bmp'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);

//查看文件的名字符串的编码方式
$encode = mb_detect_encoding($targetFile, array("UTF-8","GBK","ASCII","GB2312"));
//echo $tempFile.'<br>';
//echo $targetFile.'<br>';
//echo $encode.'<br>';
/*
if ($encode == "UTF-8"){
$targetFile = iconv("UTF-8","GBK",$targetFile);
}
*/

if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
echo md5($_FILES['Filedata']['name']);

} else {
echo '您好,文件类型不允许!';
}
}
?>

如果上传的文件名含有中文,可以使用mb_detect_encoding查看文件名的编码方式然后转码,由于我把文件名进行md5()了,故无需考虑编码方式了。


---------------------------------------------------------------------------------------------------------------------------


最后看一下实际的页面表现


JavaScript插件--Uploadify的使用


这里需要注意的是服务端PHP文件中echo出的数据将会出现在客户端Uploadify配置文件uploadImage.js中的onUploadSuccess()事件中的data参数里。可以在onUploadSuccess事件回调函数中 调用alert(data);来查看服务器端脚本的输出信息。


由于我在服务器端脚本中:

echo md5($_FILES['Filedata']['name']);

因此,在JS文件中的UploadSuccess事件中可以更新<img>标签的src属性,来显示刚刚上传的图片。

JavaScript插件--Uploadify的使用



由于这些数据的传递都是以Ajax方式进行的,故整个过程没有提交页面。如果想把图片文件名通过表单的形式提交,那么不妨加一个hidden类型的input元素。然后还是在onUploadSuccess事件中更新其value即可。