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. Loadrunner中百分比模式和Vuser模式

    从百分比模式切换到Vuser模式后,多个脚本时候,每个脚本的比例仍然维持不变: 切换到Vuser模式后: 如果在场景执行过程中需要动态添加Vuser,只能在Vuser模式下执行场景 如果需要执行“组” ...

  2. hdu1106 排序水题

    Problem Description 输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整 ...

  3. iOS LoginDemo

    // // ViewController.m // FicowLoginDemo1 // // Created by Ficow on 15/11/12. // Copyright © 2015年 F ...

  4. Java线程并发控制基础知识

    微博上众神推荐今年4月刚刚出版的一本书,淘宝华黎撰写的<大型网站系统与Java中间件实践>,一线工程师的作品,实践出真知,果断要看. 前两章与<淘宝技术这十年>内容类似,基本是 ...

  5. LightOJ1298 One Theorem, One Year（DP + 欧拉函数性质）

    题目 Source http://www.lightoj.com/volume_showproblem.php?problem=1298 Description A number is Almost- ...

  6. sqlSQL2008如何创建定时作业

    SQL2008如何创建定时作业?此方法也适应于Sql Server2005数据库,有兴趣的可以来看下! 1.打开[SQL Server Management Studio],在[对象资源管理器]列表中 ...

  7. Cache的使用

    公共方法Add 将指定项添加到 Cache 对象,该对象具有依赖项.过期和优先级策略以及一个委托(可用于在从 Cache 移除插入项时通知应用程序). Equals(从 Object 继承) 已重载. ...

  8. CF#335 Board Game

    Board Game time limit per test 2.5 seconds memory limit per test 256 megabytes input standard input ...

  9. POJ2774 & 后缀数组模板题

    题意: 求两个字符串的LCP SOL: 模板题.连一起搞一搞就好了...主要是记录一下做(sha)题(bi)过程心(cao)得(dan)体(xin)会(qing) 后缀数组概念...还算是简单的,过程 ...

  10. ACM: HDU 3790 最短路径问题-Dijkstra算法

    HDU 3790 最短路径问题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Des ...