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的更多相关文章

  1. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  2. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  3. 7款js文件上传插件

    1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...

  4. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  5. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  6. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  7. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  8. 可拖拽和带预览图的jQuery文件上传插件ssi-uploader

    插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...

  9. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

随机推荐

  1. JAVA多线程实现的四种方式

    Java多线程实现方式主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorService.Cal ...

  2. python 继承

    继承一个类 如果已经定义了Person类,需要定义新的Student和Teacher类时,可以直接从Person类继承: class Person(object): def __init__(self ...

  3. SQL Case when 的使用方法（转）

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  4. express随记01

    系统变量的设置 app.get(env) | process.env.NODE_ENV: 会自动判断当前环境类型; app.get(port) | process.env.PORT: 必须手动设置; ...

  5. bpl 包的编写和引用

    转载:http://www.cnblogs.com/gxch/archive/2011/04/23/bpl.html 为什么要使用包? 答案很简单:因为包的功能强大.设计期包(design-time ...

  6. jquery: json树组数据输出到表格Dom树的处理方法

    项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...

  7. 8VC Venture Cup 2016 - Final Round (Div. 2 Edition)

    暴力 A - Orchestra import java.io.*; import java.util.*; public class Main { public static void main(S ...

  8. HTML5学习之路

    出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.

  9. WPF: 旋转Thumb后，DragDelta移动距离出错的解决

    当Thumb跟随Grid旋转90度后,拖拽控件时会飞掉. <Grid x:Name="gridMain" Width="100" Height=" ...

  10. 使用递推解题：EOJ2999

    题目: Description 给定一个多项式 (ax+by)k,计算多项式展开后 xnym 项的系数. Input 第1行:一个整数T(1≤T≤10)为问题数. 接下来共T行.每行5个整数,分别为a ...