Fine Uploader文件上传组件用法示例

这篇文章主要为大家详细介绍了Fine Uploader文件上传组件用法示例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随php教程的小玲来看看吧！

最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要求类似IE版本必须是9或是更高的IE10].在不同浏览器中提供统一用户体验.该组件基本覆盖目前所有主流浏览器.同时没有任何第三方组件依赖.相当Clear.在服务器端已经覆盖支持了ASP.NET/ColdFusion/Java/Node.js/Perl/PHP/Python. 对上传细节类似限制文件大小，文件类型，文件上传的数量等通过统一接口以暴露选项方式操作.看到Github 上Fine Uploader 按照官方的说法. Fine Uploader前身是Ajax Upload. 新版本Fine Uploader主要添加一些新特性.从1.0版本发布的Realse Note来看.二者最大的区别在于.Fine Uploder不在基于Jquery组件.而某些细节处理也更加统一严格.类似返回值全部统一为Json格式.对后台服务器操作和前端Dom对象一些操作Code全部集中Js Script脚本文件中.这样集成使Fine Uploader组件使用非常简单.只需要添加一个CSS+JavaScript文件即可实现文件上传.大大简化用户引用和操作组件难度.Fine Uploader特点如下:Fine Uploader Features:A：支持文件上传进度显示.B：文件拖拽浏览器上传方式C：Ajax页面无刷新.D：多文件上传.F：跨浏览器.E：跨后台服务器端语言.在Git Hub上Fine Uploader上下载打包源码,在Php Designer 8中打开其源码可以看到其源码结构如下:在根目录中可以看到Client客户端调用需要使用文件.Server目录则是对应不同语言Perl/Php/Asp.net[VB]等版本实现.test目录则有包含一个完整本地Sample Demo.可供参考.如何快速构建一个简单Demo? 其实官方在Basic-Demo-Page上已经给出一个简单的演示.这里基于Bootstrap方式构建.首先新建一个Html空白页面.命名FineUploderDemo.html.添加如下CSS引用如下:

代码如下:

<link href="static/css/fineuploader.css" rel="stylesheet"> 
<link href="static/css/bootstrap.min.css" rel="stylesheet"> 

代码如下:

 
<script src="static/script/fineupload/header.js"></script> 
<script src="static/script/fineupload/util.js"></script> 
<script src="static/script/fineupload/button.js"></script> 
<script src="static/script/fineupload/handler.base.js"></script> 
<script src="static/script/fineupload/handler.form.js"></script> 
<script src="static/script/fineupload/handler.xhr.js"></script> 
<script src="static/script/fineupload/uploader.basic.js"></script> 
<script src="static/script/fineupload/dnd.js"></script> 
<script src="static/script/fineupload/uploader.js"></script> 

代码如下:

 
<div id="bootstrapped-fine-uploader"></div> 
<script> 
function createUploader() { 
var uploader = new qq.FineUploader({ 
element: document.getElementById('bootstrapped-fine-uploader'), 
request: { 
endpoint: 'server/handlerfunction' 
}, 
text: { 
uploadButton: '<i class="icon-upload icon-white"></i> Click me now and upload a product image' 
}, 
template: 
'<div class="qq-uploader span12">' + 
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' + 
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' + 
'<span class="qq-drop-processing"><span>{dropProcessingText}</span>'+ 
'<span class="qq-drop-processing-spinner"></span></span>' + 
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' + 
'</div>', 
classes: { 
success: 'alert alert-success', 
fail: 'alert alert-error' 
}, 
debug: true 
}); 
} 

window.onload = createUploader; 
</script> 

代码如下:

 
validation: 
{ 
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'], 
sizeLimit: 204800 // 200 kB = 200 * 1024 bytes 
} 
allowedExtensions控制上传文件的后缀格式数组. 
sizeLimit上传文件大小的上限，单位为byte的数值.浏览器不一定支持本设置.也可以在服务器端里设置. 
minSizeLimit：上传文件大小的下限，单位为byte的数值.同上有些浏览器存在适配问题.建议统一在服务端设置. 
另外针对qq.FineUploder对象在执行上传操作整个过程.定义了五个客户端可控做额外操作的事件.可以再callback参数下设置定义: 
callbacks: 
{ 
onSubmit: function(id, fileName) { 
$messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>'); 
}, 
onUpload: function(id, fileName) { 
$('#file-' + id).addClass('alert-info') 
.html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' + 
'Initializing ' + 
'“' + fileName + '”'); 
} 
} 

代码如下:

 
params: 
{ 
argument1: "value1", 
argument2: "value2" 
}, 

代码如下:

 
$('#triggerUpload').click(function() { 
uploader2.uploadStoredFiles(); 
}); 

代码如下:

 
request: 
{ 
endpoint: 'server/handlerfunction' 
}, 

代码如下:

 
request: 
{ 
endpoint: 'controller/php.php' 
} 

代码如下:

 
$allowedExtensions = array("jpeg", "jpg", "bmp", "png"); 
$sizeLimit = 10 * 1024 * 1024; 
$uploader = new qqFileUploader($allowedExtensions, $sizeLimit); 
$result = $uploader->handleUpload('uploads/'); //folder for uploaded files 
echo htmlspecialchars(json_encode($result), ENT_NOQUOTES); 

代码如下:

 
/** 
* Handle the uploaded file 
* @param string $uploadDirectory 
* @param string $replaceOldFile=true 
* @returns array('success'=>true) or array('error'=>'error message') 
*/ 
function handleUpload($uploadDirectory, $replaceOldFile = FALSE){ 
if (!is_writable($uploadDirectory)){ 
return array('error' => "Server error. Upload directory isn't writable."); 
} 

if (!$this->file){ 
return array('error' => 'No files were uploaded.'); 
} 

$size = $this->file->getSize(); 

if ($size == 0) { 
return array('error' => 'File is empty'); 
} 

if ($size > $this->sizeLimit) { 
return array('error' => 'File is too large'); 
} 

$pathinfo = pathinfo($this->file->getName()); 
$filename = $pathinfo['filename']; 
//$filename = md5(uniqid()); 
$ext = @$pathinfo['extension'];// hide notices if extension is empty 

if($this->allowedExtensions && !in_array(strtolower($ext), $this->allowedExtensions)){ 
$these = implode(', ', $this->allowedExtensions); 
return array('error' => 'File has an invalid extension, it should be one of '. $these . '.'); 
} 

$ext = ($ext == '') ? $ext : '.' . $ext; 

if(!$replaceOldFile){ 
/// don't overwrite previous files that were uploaded 
while (file_exists($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)) { 
$filename .= rand(10, 99); 
} 
} 

$this->uploadName = $filename . $ext; 

if ($this->file->save($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)){ 
return array('success'=>true); 
} else { 
return array('error'=> 'Could not save uploaded file.' . 
'The upload was cancelled, or server error encountered'); 
} 

} 

代码如下:

 
if (!file_exists($uploadDirectory)) { 
return array('error' => "Server error. Upload directory dones't exist."); 
} 

注：关于Fine Uploader文件上传组件用法示例的内容就先介绍到这里，更多相关文章的可以留意