文件上传插件 -- 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我们也要写上传方法：（这里面我用面向过程，写的简单）

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

20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 1. jQuer ...
7款js文件上传插件
1. jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...
强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
jQuery文件上传插件Uploadify（转）
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
可拖拽和带预览图的jQuery文件上传插件ssi-uploader
插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...
Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

随机推荐

【项目总结】之——JS分割字符串
背景: 在我们做那个招标项目的时候,由于是刚刚接触到这个BS东西,我基本上是什么也不会.可是当时组长浩哥给过我一个任务,就是叫我将数据里面以字符串形式存在的信息切割开,然后显示到前台上去.当时对于浩哥 ...
关于如何在MFC工程中输入不同的数据进行调试
我们可以采用c++的文件输入输出来进行调试这样就绕过了不能使用黑窗口输入数据就不能调试的思维定式不是黑窗口的我们都可以考虑用文件流输入输出或者用控件来输入? http://blog.csdn.n ...
【转】【异常处理】Incorrect string value: '\xF0\x90\x8D\x83...' for column... Emoji表情字符过滤的Java实现
http://blog.csdn.net/shootyou/article/details/44852639 Emoji表情字符现在在APP已经广泛支持了.但是MySQL的UTF8编码对Emoji字符 ...
poj1061 Exgcd
#include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...
express随记01
系统变量的设置 app.get(env) | process.env.NODE_ENV: 会自动判断当前环境类型; app.get(port) | process.env.PORT: 必须手动设置; ...
C#与mysql做ASP.NET网页数据库查询速度测试
两种方法是:1,使用mysql数据库的存储过程:2,C#编码,做网页后台与mysql数据库连接,前台测试显示测试过结果下面我将分别讲解两种方法的具体实现. 1,使用mysql数据库的存储过程插入万条大 ...
[xsd学习]xsd实例
以下为一个表示学校的xml文件,学校内有若干学生,每个学生都有基本信息,电脑信息,选课信息 <?xml version="1.0" encoding="UTF-8& ...
[bzoj3224]普通平衡树/3223文艺平衡树
这是一道很普通的题.. 最近花了很多时间来想要去干什么,感觉自己还是太拿衣服做这道题是因为偶尔看到了lavender的blog和她的bzoj早期AC记录,就被题目深深地吸引到了,原因有二: 自己sp ...
Fibonacci
20145218 <Java程序设计>第01次实验报告实验内容简单使用命令行撰写简单的Hello.java程序,使用命令行编译.运行.编译命令javac -d Hello.java, ...
python 代码片段17
#coding=utf-8 try: get_mutex() do_some_stuff() except (IndexError,KeyError,AttributeError),e: log(&q ...

文件上传插件 -- plupload

文件上传插件 -- plupload的更多相关文章

随机推荐

热门专题