• Web文件上传模块 Plupload


    Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。

    示例代码:

    <!-- Load Queue widget CSS and jQuery -->
    <style type="text/css">@import url(css/plupload.queue.css);</style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.3");
    </script>

    <!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
    <script type="text/javascript" src="/plupload/js/gears_init.js"></script>
    <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

    <!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
    <script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>

    <script type="text/javascript">
    // Convert divs to queue widgets when the DOM is ready
    $().ready(function() {
    $("#uploader").pluploadQueue({
    // General settings
    runtimes : 'gears,flash,silverlight,browserplus,html5',
    url : 'upload.php',
    max_file_size : '10mb',
    chunk_size : '1mb',
    unique_names : true,

    // Resize images on clientside if we can
    resize : {width : 320, height : 240, quality : 90},

    // Specify what files to browse for
    filters : [
    {title : "Image files", extensions : "jpg,gif,png"},
    {title : "Zip files", extensions : "zip"}
    ],

    // Flash settings
    flash_swf_url : '/plupload/js/plupload.flash.swf',

    // Silverlight settings
    silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
    });

    // Client side form validation
    $('form').submit(function(e) {
    var uploader = $('#uploader').pluploadQueue();

    // Validate number of uploaded files
    if (uploader.total.uploaded == 0) {
    // Files in queue upload them first
    if (uploader.files.length > 0) {
    // When all files are uploaded submit form
    uploader.bind('UploadProgress', function() {
    if (uploader.total.uploaded == uploader.files.length)
    $('form').submit();
    });

    uploader.start();
    } else
    alert('You must at least upload one file.');

    e.preventDefault();
    }
    });
    });
    </script>

    ...

    <form ..>
    <div id="uploader">
    <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
    </div>
    </form>
  • 相关阅读:
    内网渗透笔记
    shift粘滞键后门创建/复原批处理
    通过Wireshark抓包进行Cookie劫持
    最全前端资源汇集 (持续整理中)
    HTML5教程之html 5 本地数据库(Web Sql Database)
    myslq 基本命令
    Node.js面试题:侧重后端应用与对Node核心的理解
    44个 Javascript 变态题解析 (上下)
    BAT及各大互联网公司前端笔试面试题--Html,Css篇
    Web前端面试题集锦
  • 原文地址:https://www.cnblogs.com/nosnowwolf/p/2215074.html
Copyright © 2020-2023  润新知