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. 三层+MVC导出Excel(2)

    背景: 出门在外,一切以健康为主,学习为辅,健康搞好了,学习也不能拉下,在外工作期间,我们在做数据导出的时候,自己封了一个类,利用NPOI进行数据导出Excel,自我感觉良好,特给大家分享一下,希望对 ...

  2. 领域模型(domain model)&贫血模型(anaemic domain model)&充血模型(rich domain model)

    领域模型是领域内的概念类或现实世界中对象的可视化表示,又称为概念模型或分析对象模型,它专注于分析问题领域本身,发掘重要的业务领域概念,并建立业务领域概念之间的关系. 贫血模型是指使用的领域对象中只有s ...

  3. POJ 1226 后缀数组

    题目链接:http://poj.org/problem?id=1226 题意:给定n个字符串[只含大小写字母],求一个字符串要求在n个串或者他们翻转后的串的出现过.输出满足要求的字符串的长度 思路:根 ...

  4. css3 -- 浏览器支持

    浏览器支持的前缀: 1.浏览器兼容前缀 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg) ...

  5. 伪Acmer的推理(dfs/bfs)

    时间限制:1000MS  内存限制:65535K 提交次数:12 通过次数:9 收入:32 题型: 编程题   语言: C++;C Description 现在正是期末,在复习离散数学的Acmer遇到 ...

  6. Spring MVC Test -Controller

    http://www.petrikainulainen.net/programming/spring-framework/unit-testing-of-spring-mvc-controllers- ...

  7. Codeforces Round #348(VK Cup 2016 - Round 2)

    A - Little Artem and Presents (div2) 1 2 1 2这样加就可以了 #include <bits/stdc++.h> typedef long long ...

  8. Codeforces Round #346 (Div. 2)

    前三题水 A #include <bits/stdc++.h> typedef long long ll; const int N = 1e5 + 5; int main() { int ...

  9. Storm命令详解

    在Linux终端直接输入storm,不带任何参数信息,或者输入storm help,可以查看storm命令行客户端(Command line client)提供的帮助信息.Storm 0.9.0.1版 ...

  10. java中的IO操作总结

    一.InputStream重用技巧(利用ByteArrayOutputStream) 对同一个InputStream对象进行使用多次. 比如,客户端从服务器获取数据 ,利用HttpURLConnect ...