uploadfiy 有两个版本，一个是 Flash 版，一个是 HTML5 版(官网售价 5 美元)。其中，Flash版本主要用于网页端或者安卓手机，然而对于 ios 系统，只能使用 HTML5 版。

另外，对于图片上传功能，安卓系统，一次只能上传一张图片，而ios系统一次可以上传多图。

今天，分享一下关于 uploadify HTML5 版本的图片上传功能。

如果对于 Flash 版本的熟悉的朋友，那么使用 HTML5 版本的话，是很轻松的。引用的关键 JS 文件和 CSS 只需要替换为 jquery.uploadifive.min.js 和 uploadifive.css 。

html 页面的源码：

UploadiFive Test

body {

font: 13px Arial, Helvetica, Sans-serif;

}

.uploadifive-button {

float: left;

margin-right: 10px;

}

#queue {

border: 1px solid #E5E5E5;

height: 177px;

overflow: auto;

margin-bottom: 10px;

padding: 0 3px 3px;

width: 300px;

}

UploadiFive Demo

Upload Files

$(function() {

$('#file_upload').uploadifive({

'auto' : false,//是否自动上传

'checkScript' : 'check-exists.php',

'formData' : {

'timestamp' : '<?php echo $timestamp;?>',

'token' : '<?php echo md5('unique_salt' . $timestamp);?>'

},

'queueID' : 'queue',

'uploadScript' : 'uploadifive.php',//上传图片时，请求的文件

'onUploadComplete' : function(file, data) { //上传完成后，返回的内容

alert(file);

}

});

});

PHP 文件的源码：

/*

UploadiFive

Copyright (c) 2012 Reactive Apps, Ronnie Garcia

*/

// Set the uplaod directory

$uploadDir = '/uploads/';

// Set the allowed file extensions

$fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // Allowed file extensions

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {

$tempFile = $_FILES['Filedata']['tmp_name'];

$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;

$targetFile = $uploadDir . $_FILES['Filedata']['name'];

// Validate the filetype

$fileParts = pathinfo($_FILES['Filedata']['name']);

if (in_array(strtolower($fileParts['extension']), $fileTypes)) {

// Save the file

move_uploaded_file($tempFile, $targetFile);

echo 1;

} else {

// The file type wasn't allowed

echo 'Invalid file type.';

}

}

?>

这里依然演示一个之前文章写过的功能：使用 Uploadify HTML5 版本，获取回调图片地址,并将图片在前台显示。

如果你需要源码或者需要这个demo示例，请点击 “QQ交谈” 联系我，并通过下方的支付宝付款码进行购买。