文件上传插件 -- plupload

时间:2022-03-16 22:55:55

refresh:重新实例化uploader

 removeFile(id):从file中移除某个文件

  splice(start,length):从队列中start开始删除length个文件, 返回被删除的文件列表

  start() 开始上传

stop()停止上传

  unbind(name, function): 接触事件绑定

  unbindAll()解绑所有事件

 属性集合:

features:uploader中包含那些特性

files:当前队列中的文件列表

id:uploader实例的唯一id

runtime:当前运行环境(是html5、flash等等)

state:当前上传进度状态

total:当前上传文件的信息集合

事件集合:(up为uploader缩写)

BeforeUpload(up, file):文件上传完之前触发的事件

ChunkUploaded(up, file,response)文件被分块上传的事件

Destroy(up):uploader的destroy调用的方法

Error(up, err):上传出错的时候触发

Fileadded(up, files):用户选择文件时触发

FileRemoved(up, files):当文件从上传队列中移除触发

FileUploaded(up, file, res):文件上传成功的时候触发

Init(up):当初始化的时候触发

PostInit(up):init执行完以后要执行的事件触发

QueueChanged(up):当文件队列变化时触发

Refresh(up):当silverlight/flash或是其他运行环境需要移动的时候触发

StateChanged(up)当整个上传队列被改变的时候触发

UploadComplete(up,file)当队列中所有文件被上传完时触发

UploadFile(up,file)当一个文件被上传的时候触发

UploadProgress(up,file):当文件正在被上传中触发

用的时候引入Jquery和plupload的 js,

HTML文件,如:

<?php
<?php
header( "Content-Type:text/html;charset=utf-8" );
include_once '../config/db.inc.php';
$db = new DBconnect("localhost","root","","chahua");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Baby Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../Public/Js/plupload/plupload.min.js"></script>
<script src="../Public/Js/jquery-1.7.1.min.js"></script> <link rel="stylesheet" type="text/css" href="../Public/Css/style.css" />
<style>
.right_top dl{ margint:0; padding:0;}
#container{}
.btn_cl{ background:#E8E8E8;display:inline-block; border:1px solid #8D8D8D;}
#container a {background:url(../Public/Img/buttons.png) no-repeat; display:inline-block; height:20px; margin:5px; padding-left:20px; width:160px;font-size:12px; color:#666;text-decoration:none;}
#container a#le{ background-position:-182px 0px;}
.tit span,#filelist div span{ display:inline-block; font-size:14px; color:#333;}
span.tit_1{ width:240px;}
span.size{ width:50px;}
</style>
</head> <body>
<div class="right_top">
<dl>
<dt></dt>
<dd>新增友情链接</dd>
</dl>
</div>
<div class="content">
<form action="linkadd.php" method="post" enctype="multipart/form-data">
<dl>
<dt></dt>
<dd>名称:<input type="text" name="name" ></dd>
<dd>内容:<textarea name="content"></textarea></dd>
<dd>地址:<input type="text" name="url"></dd>
<dd style="margin: 10px 40px" id="append">
<span style="display:inline-block;float:left;margin-left:-41px;">图片:</span>
<!-- <input type="file" name="file">-->
<div class="tit">
<span class="tit_1">文件名</span>
<span class="size">大小 </span>
<span class="state">状态</span>
</div>
<div id="filelist"><em>No runtime found.</em></div>
<div id="container" style=""> <input id="waterImage" type="hidden" name="waterImage" />
<span class="btn_cl">
<a href="javascript:void(0);" id="uploader" style="">添加图片</a>
<a href="javascript:void(0);" id="le" style="">开始上传</a>
</span>
</div>
</dd> <dd><input type="submit" value="新增"></dd>
</dl>
</form>
</div>
</body>
</html>
<script type="text/javascript">
var len = 0;
var uploader = new plupload.Uploader({
runtimes : 'flash,html5',
browse_button : 'uploader',
container: 'container',
max_file_size : '2600kb',
url : 'uploads.php',
flash_swf_url : '../Public/Js/plupload/js/plupload.flash.swf',
filters : [
{title : "Image files", extensions : "jpg,gif,png"}
]
}); uploader.init();//初始化
uploader.bind('FilesAdded', function(up, files) {//添加
// uploader.start();
$("#filelist").find("em").html('');
$.each(files, function(i, file) {
$('#filelist').append(
'<div id="' + file.id + '"><pan class="tit_1">' +
file.name +'</span><span class="size">'+
plupload.formatSize(file.size) + '</span> <b></b>' +
'</div>');
});
});
uploader.bind("FileUploaded",function(up, file, info){//上传完成后预览
lableinfo = JSON.parse(info.response);
// console.log(info.response);
var url = "../Upload/pic/"+lableinfo.result;
var str = '<img src="'+url+'" style="width:80px;height:80px;border:1px solid #666;margin:2px;"/><b></b>';
$("#append").append(str);
$('#waterImage').val(lableinfo.result+','+$('#waterImage').val());
++len; });
uploader.bind('UploadProgress', function(up, file) { //上传进度
$('#' + file.id + " b").html(file.percent + "%");
});
uploader.bind("UploadComplete",function(up,file){//所有都上传完成
$('#filelist').html(len+"成功!");
});
$('#le').click(function(e) {//点击上传
uploader.start();
e.preventDefault();
});
</script> ?>

这里也只是HTMl页面,PHP我们也要写上传方法:(这里面我用面向过程,写的简单)

 <?php
<?php
//上传文件错误判定
if($_FILES['file']['error']){
echo "error!";
switch ($_FILES['file']['error']){
case 1: echo '文件尺寸超过允许的最大上传限度!'; break;
case 2: echo '文件尺寸超过允许的最大上传限度!'; break;
case 3: echo '只有部分文件被上传!'; break;
case 4: echo '没有任何文件被上传!'; break;
}
exit;
}
//上传文件格式判定
$type = array('gif', 'jpg', 'png', 'jpeg'); //充许上传文件的类型
// print_r($_FILES);
$name = explode('.',$_FILES["file"]['name']);
if(!in_array($name[1] , $type)){
//echo "<script>alert('上传文件类型错误!');history.back();</script>"; die('{"result":"'.$_FILES["file"]["name"].'","state":"ERROR"}');
}
//设置文件保存路径
$dirs = "../Upload/pic/";
if(!is_dir($dirs)){
mkdir($dirs);
} //文件名的定义,不定义而使用时间戳
$str = explode(".", $_FILES["file"]['name']);
$name = time().rand(100,999);
$upfile = $dirs.$name.".".$str[1];
$savename = $name.".".$str[1];
if(isset($_FILES['file']['tmp_name']) && is_uploaded_file($_FILES["file"]["tmp_name"])){
if(!move_uploaded_file($_FILES["file"]['tmp_name'],$upfile)){
die('{"result":"错误:没有将文件移动到指定目录!","state":"ERROR"}');
}
die('{"originalName": "'.$_FILES["file"]['name'].'","url":"'.$dirs.'","result":"'.$savename.'","state":"SUCCESS"}');
}else {
die('{"result":"可能文件上传被攻击!文件名:'.$_FILES['file']['name'].'","state":"ERROR"}');
}
?>

效果如下 :(很简单)

文件上传插件 -- plupload