相信很多小伙伴在日常的项目功能中不止一次用到过上传插件吧,常用的上传插件有很多,比如有名的uploadify
,我之前的项目中一直也是在用uploadify
,但是最近的一个项目,却让我不得不放弃了这个好用、方便的上传插件,改用起了plupload
,这个组件真心强大,不仅支持各种浏览器,而且上传方式也是多种多样,下面我来介绍一下这个组件简单的demo和配置:
简介
plupload是前端的一款上传组件,他拥有多种上传方式HTML5、flash、silverlight等,并会自动侦测当前的环境,选择最合适的上传方式。只是这一点就让人心动了,前端的朋友一定知道,有的插件对浏览器的要求也很高,但是plupload
最低支持IE7以上,用过的童鞋一定会对这款组件的强大赞不绝口!废话不多说,下面介绍它的使用:
使用
和大多数插件的使用方式一样,首先要去下载一个它的文件包plupload-2.1.9版压缩包
引入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">
<div id="container">
<a id="pickfiles" href="javascript:;" style="color: white;">请选择图片</a>
<a id="uploadfiles" href="javascript:;" class="btn_s" style="padding:2px 14px;">上传</a>
<p id="ppp"></p> <!-- 显示上传图片名字 -->
<input type='hidden' name='photo' id="photo" value=""> <!-- 上传成功保存上传文件路径 -->
</div>
</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 = '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>'; //显示所选图片名字
});
},
FileUploaded: function(uploader,file,responseObject) { //上传成功回调函数
var data = JSON.parse(responseObject.response);
var li = "<img src='"+data.file_url+"' style='width:250px;height:200px;' />"; //组装图片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;
}