文件上传插件 -- plupload
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我们也要写上传方法：（这里面我用面向过程，写的简单）
1 <?php 2 <?php 3 //上传文件错误判定 4 if($_FILES['file']['error']){ 5 echo "error!"; 6 switch ($_FILES['file']['error']){ 7 case 1: echo '文件尺寸超过允许的最大上传限度！'; break; 8 case 2: echo '文件尺寸超过允许的最大上传限度！'; break; 9 case 3: echo '只有部分文件被上传！'; break; 10 case 4: echo '没有任何文件被上传！'; break; 11 } 12 exit; 13 } 14 //上传文件格式判定 15 $type = array('gif', 'jpg', 'png', 'jpeg'); //充许上传文件的类型 16 // print_r($_FILES); 17 $name = explode('.',$_FILES["file"]['name']); 18 if(!in_array($name[1] , $type)){ 19 //echo "<script>alert('上传文件类型错误!');history.back();</script>"; 20 21 die('{"result":"'.$_FILES["file"]["name"].'","state":"ERROR"}'); 22 } 23 //设置文件保存路径 24 $dirs = "../Upload/pic/"; 25 if(!is_dir($dirs)){ 26 mkdir($dirs); 27 } 28 29 //文件名的定义，不定义而使用时间戳 30 $str = explode(".", $_FILES["file"]['name']); 31 $name = time().rand(100,999); 32 $upfile = $dirs.$name.".".$str[1]; 33 $savename = $name.".".$str[1]; 34 if(isset($_FILES['file']['tmp_name']) && is_uploaded_file($_FILES["file"]["tmp_name"])){ 35 if(!move_uploaded_file($_FILES["file"]['tmp_name'],$upfile)){ 36 die('{"result":"错误：没有将文件移动到指定目录！","state":"ERROR"}'); 37 } 38 die('{"originalName": "'.$_FILES["file"]['name'].'","url":"'.$dirs.'","result":"'.$savename.'","state":"SUCCESS"}'); 39 }else { 40 die('{"result":"可能文件上传被攻击！文件名：'.$_FILES['file']['name'].'","state":"ERROR"}'); 41 } 42 ?>
效果如下 ：（很简单）
