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. JMeter监控Linux服务器资源案例

    JMeter是一款压力测试工具,我们也可以用它来监控服务器资源使用情况.JMeter正常自带可以通过Tomcat的/manager/status来监控服务资源使用情况.这种情况只能监控Tomcat支持 ...

  2. 去掉SrollView、GrdiView、ListView、ViewPager等滑动到边缘的光晕效果

    当我们使用SrollView.GrdiView.ListView.ViewPager带有滑动功能的组件时,滑动到边缘时总会出现类光晕效果.这是用于提示用户已经滑动到了组件的边缘,不能再滑动了,但有时候 ...

  3. HDU 3374 最小/大表示法+KMP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题意:给定一个串s,该串有strlen(s)个循环同构串,要求输出字典序最小的同构串的下标,字典 ...

  4. node.js整理 06异步编程

    回调 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了 function heavyCompute(n, callback) { var count = 0, i, j; for (i = ...

  5. node.js整理 04网络操作

    简介 var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content- ...

  6. PAT (BL) 1001

    链接:http://pat.zju.edu.cn/contests/pat-b-practise/1001 /* 1001. 害死人不偿命的(3n+1)猜想 (15) 卡拉兹(Callatz)猜想: ...

  7. 未能加载文件或程序集"Microsoft.Web.Infrastructure 的解决方案

    转载请注明来源: http://www.cnblogs.com/zaiyuzhong/p/Unload-Infrastructure-Solution.html 部署MVC5  项目发布到文件系统 I ...

  8. 20145304 Java第八周学习报告

    20145304<Java程序设计>第八周学习总结 教材学习内容总结 NIO NIO使用频道来衔接数据节点,在处理数据时,NIO可以让你设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行标记 ...

  9. 【POJ】3974 Palindrome

    http://poj.org/problem?id=3974 题意:求s的最长回文串.(|s|<=1000000) #include <cstdio> #include <cs ...

  10. [BZOJ2790][Poi2012]Distance

    2790: [Poi2012]Distance Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 225  Solved: 115[Submit][Sta ...