Plupload插件

最新推荐文章于 2023-10-16 12:00:51 发布

「已注销」

最新推荐文章于 2023-10-16 12:00:51 发布

阅读量417

点赞数

分类专栏： WEB前端文章标签：插件文件上传

本文链接：https://blog.csdn.net/lee272616/article/details/75897757

版权

WEB前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简介

Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。

使用

最简单的入门——官方入口

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Plupload - Getting Started</title>
    <script type="text/javascript" src="../plupload-2.3.1/js/plupload.full.min.js"></script>
</head>
<body>

<div>待上传文件列表</div>
<ul id="filelist"></ul>
<br />

<div id="container">
    <a id="browse" href="javascript:;">[Browse...]</a>
    <a id="start-upload" href="javascript:;">[Start Upload]</a>
</div>

<br />
<pre id="console"></pre>

<script type="text/javascript">

    var uploader = new plupload.Uploader({
        browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
        url: 'upload.php',
        multi_selection: false
    });

    uploader.init();

    uploader.bind('FilesAdded', function(up, files) {
        var html = '';
        plupload.each(files, function(file) {
            if (up.files.length > 1) {
                alert('delete');
                up.removeFile(up.files[0]);
            }
            html = '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
        });
        document.getElementById('filelist').innerHTML = html;
    });

    uploader.bind('UploadProgress', function(up, file) {
        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
    });

    uploader.bind('Error', function(up, err) {
        document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
    });

    document.getElementById('start-upload').onclick = function() {
        uploader.start();
    };

</script>
</body>
</html>

多文件上传配置

修改配置项

var uploader = new plupload.Uploader({
    browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
    url: 'upload.php',
    // multi_selection: false, // prevent multi_selection
});

修改filesAdded方法

uploader.bind('FilesAdded', function(up, files) {
  var html = '';
  plupload.each(files, function(file) {
    html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
  });
  document.getElementById('filelist').innerHTML += html;
});