plupload—强大的前端上传组件
相信很多小伙伴在日常的项目功能中不止一次用到过上传插件吧，常用的上传插件有很多，比如有名的uploadify，我之前的项目中一直也是在用uploadify，但是最近的一个项目，却让我不得不放弃了这个好用、方便的上传插件，改用起了plupload，这个组件真心强大，不仅支持各种浏览器，而且上传方式也是多种多样，下面我来介绍一下这个组件简单的demo和配置：
简介
plupload是前端的一款上传组件，他拥有多种上传方式HTML5、flash、silverlight等，并会自动侦测当前的环境，选择最合适的上传方式。只是这一点就让人心动了，前端的朋友一定知道，有的插件对浏览器的要求也很高，但是plupload最低支持IE7以上，用过的童鞋一定会对这款组件的强大赞不绝口！废话不多说，下面介绍它的使用：
使用
和大多数插件的使用方式一样，首先要去下载一个它的文件包[plupload-2.1.9版压缩包][4]
引入js文件，如果只是做简单的上传操作，引入这一个就够了
<script type="text/javascript" src="plupload.full.min.js"></script>
接着实例化一个
plupload对象，传入所需要的配置对象调用
init()方法初始化
前端demo示例
HTML
<td width="10%" class="tdbg"><label>图片</label></td>
<td width="37.5%" colspan="3">
<a id="pickfiles" href="javascript:;" >请选择图片</a>
<a id="uploadfiles" href="javascript:;" class="btn_s" >上传</a>
<!-- 显示上传图片名字 -->
<input type='hidden' name='photo' id="photo" value=""> <!-- 上传成功保存上传文件路径 -->
</td>
JS
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // 选择图片按钮ID
container: document.getElementById('container'),
url : '<?php echo module_url("sample/main/uploadify_upload")?>', //上传路径
flash_swf_url : '<?php echo base_url("js/plupload/Moxie.swf");?>',
silverlight_xap_url : '<?php echo base_url("js/plupload/Moxie.xap");?>',
filters : {
max_file_size : '10mb', //设置上传大小
mime_types: [
{title : "Image files", extensions : "jpg,gif,png,jpeg"}, //指定文件格式
]
},
init: { //初始化方法
PostInit: function() {
document.getElementById('uploadfiles').onclick = function() { //点击上传按钮动作
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('ppp').innerHTML = '' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>'; //显示所选图片名字
});
},
FileUploaded: function(uploader,file,responseObject) { //上传成功回调函数
var data = JSON.parse(responseObject.response);
var li = ""; //组装图片html
var file_path = $("#photo").val(); //取出图片路径
if(file_path) { //如果file_path有值 删除原有图片文件
$.post('<?php echo module_url("item/main/delete_photo")?>', {file_path: file_path}, function(data) {
console.log(data);
});
}
$("#photo").val(data.url); //更新hidden 图片路径
$("#image_up").html(li); //显示图片
},
Error: function(up, err) { //返回错误信息
alert(err.message);
}
}
});
后端demo示例
上传图片处理
/**
* 上传图片
* @return
*/
public function plupload_photo() {
$targetPath = './uploads/breed_photo';
$file_ext = array('jpg', 'png', 'jpeg');
$arr = $this->plupload($targetPath, $file_ext);
return $arr;
}
/**
* 上传图片处理
* @param string $targetPath 相对路径
* @param array $file_ext 允许上传文件后缀
* @return json(file_url完整路径;url相对路径 )
* @author 命中水、
* @date(2016-9-29 am)
*/
function plupload($targetPath, $file_ext) {
if(empty($targetPath) || empty($file_ext) || !is_array($file_ext)) {
return '不是正确的文件类型';
}
$tempFile = $_FILES["file"]["tmp_name"];
if (!file_exists($targetPath)) {
@mkdir($targetPath);
chmod($targetPath, 0777);
}
$file_name = $_REQUEST['name'];
$fileParts = pathinfo($file_name);
$date = date('YmdHis', time());
$targetFile = rtrim($targetPath,'/').'/'.$date.'_'.$file_name;
$targetFiles = iconv("UTF-8", "GBK//IGNORE",$targetFile);
$url = base_url(substr($targetFile,1));
if (in_array($fileParts['extension'],$file_ext)) {
if(move_uploaded_file($tempFile,$targetFiles)){
$file_message = array(
'file_url' => $url,
'url' => substr($targetFile,1)
);
return json_encode($file_message);
}else{
echo '啊哦！文件移动失败了,请检查文件路径';
return FALSE;
}
} else {
echo '文件类型不匹配哈！';
return FALSE;
}
}
删除图片处理
/**
* 删除文件
* @return bool
*/
public function delete_photo() {
$file_path = $this->input->post('file_path');
$file_path = str_replace('/', '\\', $file_path);
$file_path = getcwd() . $file_path; //转换绝对路径
$file_path = iconv("UTF-8", "GBK",$file_path); //调整编码
if( unlink( $file_path ) ) return TRUE;
return FALSE;
}
附录资源
[plupload下载地址][2]
[plupload配置和各事件说明][3]
[plupload-2.1.9版压缩包][4]