uploadfiy 有两个版本,一个是 Flash 版,一个是 HTML5 版(官网售价 5 美元)。其中,Flash版本主要用于网页端或者安卓手机,然而对于 ios 系统,只能使用 HTML5 版。
另外,对于图片上传功能,安卓系统,一次只能上传一张图片,而ios系统一次可以上传多图。
今天,分享一下关于 uploadify HTML5 版本的图片上传功能。
如果对于 Flash 版本的熟悉的朋友,那么使用 HTML5 版本的话,是很轻松的。引用的关键 JS 文件和 CSS 只需要替换为 jquery.uploadifive.min.js 和 uploadifive.css 。
html 页面的源码:
UploadiFive Testbody {
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交谈” 联系我,并通过下方的支付宝付款码进行购买。