从官方网站下载的Uploadify最新版本：http://www.uploadify.com/download/
jQuery库是1.7.1版本。
下载好的Uploadify目录下面的文件有：
用到的文件有
uploadify.css
jquery.uploadify.min.js
下面先给出HTML代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Demo</title> 6 <link rel="stylesheet" type="text/css" href="/uploadify/uploadify.css" /> 7 <script type="text/javascript" src="/uploadify/jquery-1.7.1.min.js"></script> 8 <script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script> 9 10 <script type="text/javascript"> 11 $(function(){ 12 //这一行也是必要的，后面会调用 13 <?php $timestamp = time();?> 14 $('#editor_img').uploadify({ 15 //这里往表单中添加数据 16 'formData' : { 17 'timestamp' : '<?php echo $timestamp;?>', 18 'token' : '<?php echo md5('unique_salt' . $timestamp);?>', 19 //这是上传到的文件夹 20 'folder' : '__ROOT__/Uploads' 21 }, 22 'swf' : '/uploadify/uploadify.swf', 23 'uploader' : '/uploadify/uploadify.php', 24 'buttonClass' : 'upload-image', 25 'fileTypeExts' : '*.gif; *.jpg; *.png', 26 'width' : 28, 27 'height' : 28 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 <form id="form" action="{:U('Index/doData')}" method="post" class="think-form"> 34 <!-- 注意这里的name必须写成 Filedata,下面会解释 --> 35 <input id="editor_img" type="file" name="Filedata" /> 36 <input type="submit" value="提交" /> 37 </form> 38 </body> 39 </html>
注意，uploadify.php函数是需要修改的，不然会报出很多错误，比如找不到文件，或者某个变量未定义等等，还可以修改返回值。
1 <?php 2 /* 3 Uploadify 4 Copyright (c) 2012 Reactive Apps, Ronnie Garcia 5 Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 6 */ 7 8 // Define a destination 9 $targetFolder = '/Uploads'; // Relative to the root 10 11 $verifyToken = md5('unique_salt' . $_POST['timestamp']); 12 13 if (!empty($_FILES) && $_POST['token'] == $verifyToken) { 14 //这里接收传过来的目录 15 $targetFolder = $_POST['folder']; 16 //这里出现了Filedata，前面的文件名称对应这里就行，不然会报错 17 $tempFile = $_FILES['Filedata']['tmp_name']; 18 $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder; 19 $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name']; 20 21 // Validate the file type 22 $fileTypes = array('jpg','jpeg','gif','png'); // File extensions 23 $fileParts = pathinfo($_FILES['Filedata']['name']); 24 25 if (in_array($fileParts['extension'],$fileTypes)) { 26 move_uploaded_file($tempFile,$targetFile); 27 //修改返回值，本来默认是返回1，现在改为返回相对路径 28 echo $targetFolder. '/' . $_FILES['Filedata']['name']; 29 } else { 30 echo 'Invalid file type.'; 31 } 32 } 33 ?>
这样就可以把图片上传到服务器指定目录下了。
我不知道是版本问题还是别的原因，按照网上的做法总是出错，所以记下成功的配置，供需要的人参考。
接着更新一下，以上使用因为没有特别编辑Uploadify.php文件，用的是自带文件，所以前台的需要做相应的修改，比如后台用到了时间戳，前台需要传递参数等。不过关于Input的name在上面的例子里面为什么非要写成Filedata，还不是很清楚。
下面给出一个经典示例：
HTML页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Uploadify</title> <script type="text/javascript" src="/uploadify/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/uploadify/swfobject.js"></script> <script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script> <link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet"/> <script type="text/javascript"> $(function(){ <?php $timestamp = time();?> $('#file_upload').uploadify({ 'formData' : { 'timestamp' : '<?php echo $timestamp;?>', 'token' : '<?php echo md5('unique_salt' . $timestamp);?>', 'folder' : '__ROOT__/Uploads' }, 'swf' : '/uploadify/uploadify.swf', 'uploader' : '/uploadify/uploadify.php', 'buttonClass' : 'upload-image', 'buttonText' :'选择文件', 'fileTypeExts' : '*.gif; *.jpg; *.png; *.pdf', 'width' : 500, 'height' : 50, 'auto' : false, 'cancelImg' :'/uploadify/uploadify-cancel.png', 'onUploadSuccess' : function(file, data, response) { var html = '<p id="file_name">'+file.name; html +='<a href="javascript:void(0)" onclick="delete_file_name(this);">删除</a>'; html +='<input type="hidden" name="file_name" value="'+data+'"/></p>'; $('#file_upload').after(html); } }); }); function delete_file_name(e){ var $this = $(e); $this.parent('p').remove(); } </script> </head> <body> <div style="500px; margin:auto;"> <input id="file_upload" type="file" name="file_upload" /> <p id="file_name"></p> <p> <a href="javascript:$('#file_upload').uploadify('upload')">上传</a>| <a href="javascript:$('#file_upload').uploadify('cancel')">取消上传</a> </p> </div> </body> </html>
Uploadify.php做了一些简单修改
<?php /* Uploadify Copyright (c) 2012 Reactive Apps, Ronnie Garcia Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> */ // Define a destination $targetFolder = '/Uploads'; // Relative to the root $verifyToken = md5('unique_salt' . $_POST['timestamp']); if (!empty($_FILES) && $_POST['token'] == $verifyToken) { $targetFolder = $_POST['folder']; $tempFile = $_FILES['Filedata']['tmp_name']; $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder; //如果目录不存在则创建目录 if(!file_exists($targetPath)) { mkdir($targetPath,0777); } $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name']; // Validate the file type $fileTypes = array('jpg','jpeg','gif','png','pdf','txt','mp3'); // File extensions $fileParts = pathinfo($_FILES['Filedata']['name']); if (in_array($fileParts['extension'],$fileTypes)) { //处理了中文命名文件的上传 move_uploaded_file($tempFile,iconv("UTF-8","gb2312",$targetFile)); //返回的值data echo $targetFolder. '/' . $_FILES['Filedata']['name']; } else { echo 'Invalid file type.'; } } ?>
效果如下图：
如图所示，同时添加多个文件，点击上传的时候先上传第一个，再点击一次然后上传第二个，如果需要一次性上传自己研究一下吧。