http://www.cnblogs.com/KTblog/p/4740852.html

效果：

  • 起始界面。

-------------

  • 可以上上传单个文件。

-------------

  • 可以上传多个文件。

---------------

  • 点击上传。
  • 后台使用php接收上传来的文件。其它语言相同，都是接收上传的文件。

项目结构图：

代码：

upload.html代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>最基本的使用——plupload演示demo</title>

    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>

    <script src="js/plupload.full.min.js"></script>

    <style>

    body{ font-size: 12px;}

    body,p,div{ padding: 0; margin: 0;}

    .wraper{ padding: 30px 0;}

    .btn-wraper{ text-align: center;}

    .btn-wraper input{ margin: 0 10px;}

    #file-list{ width: 350px; margin: 20px auto;}

    #file-list li{ margin-bottom: 10px;}

    .file-name{ line-height: 30px;}

    .progress{ height: 4px; font-size: 0; line-height: 4px; background: orange; width: 0;}

    .tip1{text-align: center; font-size:14px; padding-top:10px;}

    .tip2{text-align: center; font-size:12px; padding-top:10px; color:#b00}

    .catalogue{ position: fixed; _position:absolute; _width:200px; left: 0; top: 0; border: 1px solid #ccc;padding: 10px; background: #eee}

    .catalogue a{ line-height: 30px; color: #0c0}

    .catalogue li{ padding: 0; margin: 0; list-style: none;}

    </style>

</head>

<body>

    <div class="wraper">

        <div class="btn-wraper">

            <input type="button" value="选择文件..." id="browse" />

            <input type="button" value="开始上传" id="upload-btn" />

        </div>

        <ul id="file-list">

        </ul>

    </div>

    <script>

        var uploader = new plupload.Uploader({ //实例化一个plupload上传对象

            browse_button : 'browse',

            url : 'FileUpload.php',

            flash_swf_url : 'js/Moxie.swf',

            silverlight_xap_url : 'js/Moxie.xap',

            /*类型验证*/

            filters: {mime_types : [ //只允许上传图片和zip文件

                { title : "Image files", extensions : "jpg,gif,png" },

                { title : "Zip files", extensions : "zip" }

              ],

              max_file_size : '400kb', //最大只能上传400kb的文件

              prevent_duplicates : true //不允许选取重复文件

            },

            /*携带参数*/

            multipart_params: {

              one: '1',

              two: '2',

              three: { //值还可以是一个字面量对象

                a: '4',

                b: '5'

              },

              four: ['6', '7', '8']  //也可以是一个数组

            }

        });

        uploader.init(); //初始化

        //绑定文件添加进队列事件

        uploader.bind('FilesAdded',function(uploader,files){

        for(var i = 0, len = files.length; i<len; i++){

                var file_name = files[i].name; //文件名

                var file_size = files[i].size; //大小

                var file_type = files[i].type; //类型

                //构造html来更新UI

                var html = '<li id="file-' + files[i].id +'"><p class="file-name" style="width:800px;">文件名：' + file_name + ' -- 大小：'+ file_size +' -- 类型：'+ file_type +'</p><p class="progress"></p></li>';

                $(html).appendTo('#file-list');

            }

        });

        //绑定文件上传进度事件

        uploader.bind('UploadProgress',function(uploader,file){

            $('#file-'+file.id+' .progress').css('width',file.percent + '%');//控制进度条

        });

        //上传按钮

        $('#upload-btn').click(function(){

            uploader.start(); //开始上传

        });

    </script>

</body>

</html>

FileUplaod.php:

<?php

print_r($_POST);

echo '<hr/>';

print_r($_FILES);

//+++++++++++++++++++++++++++++++

使用动态参数：

先在属性中设置要上传的参数：

然后再上传的前一刻，进行设置参数的值。此时的参数值，就是获取的最新参数。直接提交，就连同上传文件，以及参数一并上查。

//++++++++++++++++++++++++++++

http://snowcoal.com/article/423.html

删除添加的上传文件：

DOM结构：

生成结构的代码：

//绑定文件添加进队列事件

uploader.bind('FilesAdded',function(uploader,files){

for(var i = 0, len = files.length; i<len; i++){

        var file_name = files[i].name; //文件名

        var file_size = files[i].size; //大小

        var file_type = files[i].type; //类型

        //构造html来更新UI

        var html = '<div style="padding: 10px 0 10px 20px;" class="pic_list" id="' + files[i].id + '">文件名：' + files[i].name + '  --  (大小：' + plupload.formatSize(files[i].size) + '  --  类型：' +  files[i].type + ') <b class="pic_delete" data-val='+files[i].id+' style="color:#ff0000; cursor:pointer;">删除</b></div>';

        $(html).appendTo('#file-list');

    }

});

点击删除按钮，的函数，放在同一个js文件中：

//删除上传文件

$(document).on('click','.pic_list b.pic_delete',function(){

    $(this).parent().remove();

    var toremove = '';

    var id=$(this).attr("data-val");

    for(var i in uploader.files){

        if(uploader.files[i].id === id) { toremove = i; }

    }

    uploader.files.splice(toremove, 1);

});

前端上传组件 - Plupload的更多相关文章

  1. 前端上传组件Plupload使用指南

    我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...

  2. 【转】前端上传组件Plupload

    [转自博客园-无双] html5原生的给我们提供了文件上传的API,Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代 ...

  3. 【转】前端上传组件Plupload使用指南

    http://www.cnblogs.com/2050/p/3913184.html Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的 ...

  4. [Pulgin] 前端上传组件Plupload使用指南

    我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...

  5. web 文件上传组件 Plupload

    Plupload官网:点击打开链接   建议下载最新版本号,低版本号会出现浏览器兼容问题. 近期公司有个项目须要在web端使用多文件上传功能.刚開始准备使用HTML5来做.但是IE9下面是都不支持的, ...

  6. 前端上传插件Plupload的实际使用（个人实操）

    一个主要的页面,其中包裹了一个iframe页面,在项目中,这个iframe页面包裹在主页面的div标签中,主要用于上传文件附件. 用的是plupload.full插件,主要引入以下几个js: jque ...

  7. 多图片/文件上传 - SwfUpload/PlUpload

    <文件上传利器SWFUpload使用指南> <前端上传组件Plupload使用指南>

  8. 上传组件Fine Uploader在ASP.NET中的应用

    现如今,世面上流行着许多前端上传组件,例如:Uploadify(http://www.uploadify.com/),Fine Uploader,等等.这篇博客从头开始,介绍如何在ASP.NET MV ...

  9. 基于SqlSugar的开发框架循序渐进介绍（13）-- 基于ElementPlus的上传组件进行封装，便于项目使用

    在我们实际项目开发过程中,往往需要根据实际情况,对组件进行封装,以更简便的在界面代码中使用,在实际的前端应用中,适当的组件封装,可以减少很多重复的界面代码,并且能够非常简便的使用,本篇随笔介绍基于El ...

随机推荐

  1. 柯里化函数之Javascript

    柯里化函数之Javascript 定义 依据定义来说,柯里化就是将一个接收"多个"參数的函数拆分成一个或者很多个接收"单一"參数的函数.定义看起来是比較抽象的. ...

  2. js超简单日历

    用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...

  3. python开发环境安装

    1.首先安装python-3.4.2.msi,此为python主程序,双击安装,根据自身的情况做选择,也可以使用默认设置,一路next也没什么问题. 2.设置环境变量=>编辑Path,在最后加上 ...

  4. js 乱码解决方案

    如果网页编码规则是utf-8,即在网页头部中可以看到如下代码: 那么js文件中如果有中文字,调用输出时就会出现乱码.解决此个问题的办法如下: 即在引用javascript输出的地方加上charset= ...

  5. Java 取得当前日期之后N天的日期 zz

    链接地址:http://blog.sina.com.cn/s/blog_483486840100vrjn.html public static String afterNDay(int n){    ...

  6. STL之map和multimap（关联容器）

    map是一类关联式容器.它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响.自动建立Key - value的对应,对于迭代器来说,可以修改实值,而不能修改key. ...

  7. hibernate 持久化对象的生命周期 2.1

    持久化对象的生命周期 瞬态(自由态) 表示对象在内存中存在,在数据库中没有数据相关,比如刚刚new出来的一个对象 持久态 持久态指的是持久化对象处于由Hibernate管理的状态,这种状态下持久化对象 ...

  8. JavaEE Tutorials (5) - 运行企业bean示例

    5.1cart示例56 5.1.1业务接口57 5.1.2会话bean类57 5.1.3@Remove方法61 5.1.4辅助类61 5.1.5运行cart示例615.2一个单例会话bean示例:co ...

  9. BZOJ 1684: [Usaco2005 Oct]Close Encounter

    题目 1684: [Usaco2005 Oct]Close Encounter Time Limit: 5 Sec  Memory Limit: 64 MB Description Lacking e ...

  10. 九、cocos2dx之Actions

    本文由qinning199原创,转载请注明:http://www.cocos2dx.net/?p=86 Action是CCNode对象的一种顺序.这些动作经常改变对象的一些属性,比如位置,旋转,缩放等 ...