zoukankan      html  css  js  c++  java
  • 七牛文件上传demo

    <!DOCTYPE html>
    <!-- saved from url=(0027)http://jssdk.demo.qiniu.io/ -->
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>七牛云存储 - JavaScript SDK</title>
    <link href="http://jssdk.demo.qiniu.io/images/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="./bootstrap.css">
    <link rel="stylesheet" href="./main.css">
    <link rel="stylesheet" href="./highlight.css">

    <!--[if lt IE 9]>
    <script src="bower_components/respond/dest/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="http://jssdk.demo.qiniu.io/#">七牛云存储 - JavaScript SDK</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
    <ul class="nav navbar-nav">
    <li class="active"><a href="http://jssdk.demo.qiniu.io/#">上传示例</a></li>
    <li><a href="http://developer.qiniu.com/code/v6/sdk/javascript.html">SDK 文档</a></li>
    </ul>
    </div>
    </div>
    </nav>

    <div class="container" style="padding-top: 60px;">
    <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
    <a href="http://jssdk.demo.qiniu.io/#demo" id="demo-tab" role="tab" data-toggle="tab" aria-controls="demo" aria-expanded="true">示例</a>
    </li>
    <li role="presentation">
    <a href="http://jssdk.demo.qiniu.io/#code" id="code-tab" role="tab" data-toggle="tab" aria-controls="code">代码</a>
    </li>
    <!-- <li role="presentation">
    <a href="http://jssdk.demo.qiniu.io/#log" id="log-tab" role="tab" data-toggle="tab" aria-controls="log">日志</a>
    </li> -->
    </ul>
    <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="demo" aria-labelledby="demo-tab">

    <div class="row" style="margin-top: 20px;">
    <input type="hidden" id="domain" value="http://up-z2.qiniup.com">
    <input type="hidden" id="uptoken_url" value="http://test.weixin.com/uploadtoken.php">
    <ul class="tip col-md-12 text-mute">
    <li>
    <small>
    JavaScript SDK 基于 Plupload 开发,可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。
    </small>
    </li>
    <li>
    <small>临时上传的空间不定时清空,请勿保存重要文件。</small>
    </li>
    <li>
    <small>Html5模式大于4M文件采用分块上传。</small>
    </li>
    <li>
    <small>上传图片可查看处理效果。</small>
    </li>
    <li>
    <small>本示例限制最大上传文件100M。</small>
    </li>
    </ul>
    <div class="col-md-12">
    <div id="container" style="position: relative;">
    <a class="btn btn-default btn-lg " id="pickfiles" href="http://jssdk.demo.qiniu.io/#" style="position: relative; z-index: 1;">
    <i class="glyphicon glyphicon-plus"></i>
    <span>选择文件</span>
    </a>
    <div id="html5_1aj3rtennnga1n5h927gjn8343_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; 171px; height: 46px; overflow: hidden; z-index: 0;"><input id="html5_1aj3rtennnga1n5h927gjn8343" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; 100%; height: 100%;" multiple="" accept=""></div></div>
    </div>
    <div style="display:none" id="success" class="col-md-12">
    <div class="alert-success">
    队列全部文件处理完毕
    </div>
    </div>
    <div class="col-md-12 ">
    <table class="table table-striped table-hover text-left" style="margin-top:40px;display:none">
    <thead>
    <tr>
    <th class="col-md-4">Filename</th>
    <th class="col-md-2">Size</th>
    <th class="col-md-6">Detail</th>
    </tr>
    </thead>
    <tbody id="fsUploadProgress">
    </tbody>
    </table>
    </div>
    </div>

    </div>
    <input id = "url" type = "hidden" >
    <div role="tabpanel" class="tab-pane fade" id="code" aria-labelledby="code-tab">

    <div class="row" style="margin-top: 20px;">
    <div class="col-md-12">
    <pre><code class="javascript">
    <span class="comment">//引入Plupload 、qiniu.js后</span>
    <span class="keyword">var</span> uploader = Qiniu.uploader({
    runtimes: <span class="string">'html5,flash,html4'</span>, <span class="comment">//上传模式,依次退化</span>
    browse_button: <span class="string">'pickfiles'</span>, <span class="comment">//上传选择的点选按钮,**必需**</span>
    uptoken_url: <span class="string">'/token'</span>, <span class="comment">//Ajax请求upToken的Url,**强烈建议设置**(服务端提供)</span>
    <span class="comment">// uptoken : '<your upload="" token="">', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成</your></span><your upload="" token="">
    <span class="comment">// unique_names: true, // 默认 false,key为文件名。若开启该选项,SDK为自动生成上传成功后的key(文件名)。</span>
    <span class="comment">// save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`,则开启,SDK会忽略对key的处理</span>
    domain: <span class="string">'http://qiniu-plupload.qiniudn.com/'</span>, <span class="comment">//bucket 域名,下载资源时用到,**必需**</span>
    get_new_uptoken: <span class="literal">false</span>, <span class="comment">//设置上传文件的时候是否每次都重新获取新的token</span>
    container: <span class="string">'container'</span>, <span class="comment">//上传区域DOM ID,默认是browser_button的父元素,</span>
    max_file_size: <span class="string">'100mb'</span>, <span class="comment">//最大文件体积限制</span>
    flash_swf_url: <span class="string">'js/plupload/Moxie.swf'</span>, <span class="comment">//引入flash,相对路径</span>
    max_retries: <span class="number">3</span>, <span class="comment">//上传失败最大重试次数</span>
    dragdrop: <span class="literal">true</span>, <span class="comment">//开启可拖曳上传</span>
    drop_element: <span class="string">'container'</span>, <span class="comment">//拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传</span>
    chunk_size: <span class="string">'4mb'</span>, <span class="comment">//分块上传时,每片的体积</span>
    auto_start: <span class="literal">true</span>, <span class="comment">//选择文件后自动上传,若关闭需要自己绑定事件触发上传</span>
    init: {
    <span class="string">'FilesAdded'</span>: <span class="keyword">function</span>(up, files) {
    plupload.each(files, <span class="keyword">function</span>(file) {
    <span class="comment">// 文件添加进队列后,处理相关的事情</span>
    });
    },
    <span class="string">'BeforeUpload'</span>: <span class="keyword">function</span>(up, file) {
    <span class="comment">// 每个文件上传前,处理相关的事情</span>
    },
    <span class="string">'UploadProgress'</span>: <span class="keyword">function</span>(up, file) {
    <span class="comment">// 每个文件上传时,处理相关的事情</span>
    },
    <span class="string">'FileUploaded'</span>: <span class="keyword">function</span>(up, file, info) {
    <span class="comment">// 每个文件上传成功后,处理相关的事情</span>
    <span class="comment">// 其中 info 是文件上传成功后,服务端返回的json,形式如</span>
    <span class="comment">// {</span>
    <span class="comment">// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",</span>
    <span class="comment">// "key": "gogopher.jpg"</span>
    <span class="comment">// }</span>
    <span class="comment">// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html</span>

    <span class="comment">// var domain = up.getOption('domain');</span>
    <span class="comment">// var res = parseJSON(info);</span>
    <span class="comment">// var sourceLink = domain + res.key; 获取上传成功后的文件的Url</span>
    },
    <span class="string">'Error'</span>: <span class="keyword">function</span>(up, err, errTip) {
    <span class="comment">//上传出错时,处理相关的事情</span>
    },
    <span class="string">'UploadComplete'</span>: <span class="keyword">function</span>() {
    <span class="comment">//队列文件处理完毕后,处理相关的事情</span>
    },
    <span class="string">'Key'</span>: <span class="keyword">function</span>(up, file) {
    <span class="comment">// 若想在前端对每个文件的key进行个性化处理,可以配置该函数</span>
    <span class="comment">// 该配置必须要在 unique_names: false , save_key: false 时才生效</span>

    <span class="keyword">var</span> key = <span class="string">""</span>;
    <span class="comment">// do something with key here</span>
    <span class="keyword">return</span> key
    }
    }
    });

    <span class="comment">// domain 为七牛空间(bucket)对应的域名,选择某个空间后,可通过"空间设置-&gt;基本设置-&gt;域名设置"查看获取</span>

    <span class="comment">// uploader 为一个plupload对象,继承了所有plupload的方法,参考http://plupload.com/docs</span>
    </your></code></pre>
    </div>
    </div>

    </div>
    <div role="tabpanel" class="tab-pane fade" id="log" aria-labelledby="log-tab">
    <pre id="qiniu-js-sdk-log"><p>[qiniu-js-sdk][debug] init uploader start</p><p>[qiniu-js-sdk][debug] environment: {"browser":"Chrome","version":50,"os":"Mac OS X","osVersion":"10.10.5","swf_url":"../flash/Moxie.swf","xap_url":"../silverlight/Moxie.xap","global_event_dispatcher":"moxie.core.EventTarget.instance.dispatchEvent","OS":"Mac OS X"}</p><p>[qiniu-js-sdk][debug] userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36</p><p>[qiniu-js-sdk][debug] invoke reset_chunk_size()</p><p>[qiniu-js-sdk][debug] op.chunk_size: 4mb</p><p>[qiniu-js-sdk][debug] option: {"runtimes":"html5,flash,html4","browse_button":"pickfiles","container":"container","drop_element":"container","max_file_size":"1000mb","flash_swf_url":"bower_components/plupload/js/Moxie.swf","dragdrop":true,"chunk_size":"4mb","multi_selection":true,"uptoken_url":"uptoken","domain":"http://7xocov.com2.z0.glb.qiniucdn.com/","get_new_uptoken":false,"auto_start":true,"log_level":5,"init":{},"url":"http://upload.qiniu.com","multipart_params":{"token":""}}</p><p>[qiniu-js-sdk][debug] new plupload.Uploader(option)</p><p>[qiniu-js-sdk][debug] bind Init event</p><p>[qiniu-js-sdk][debug] bind FilesAdded event</p><p>[qiniu-js-sdk][debug] bind BeforeUpload event</p><p>[qiniu-js-sdk][debug] bind UploadProgress event</p><p>[qiniu-js-sdk][debug] bind ChunkUploaded event</p><p>[qiniu-js-sdk][debug] bind Error event</p><p>[qiniu-js-sdk][debug] bind FileUploaded event</p><p>[qiniu-js-sdk][debug] invoke uploader.init()</p><p>[qiniu-js-sdk][debug] init uploader end</p><p>[qiniu-js-sdk][debug] Init event activated</p><p>[qiniu-js-sdk][debug] get uptoken from: uptoken</p><p>[qiniu-js-sdk][debug] get new uptoken: JOiPUijNB0t8vbNKIufpn5gDKmg0G-uFHBlrQoV2:fAZ9PIhVnJ4hLNvGRQClLf9Bppg=:eyJzY29wZSI6Impzc2RrIiwiZGVhZGxpbmUiOjE0NjM2NDM2NDZ9</p></pre>
    </div>
    </div>
    </div>

    <div class="container" style="display: none;">

    <div class="text-left col-md-12 wrapper">
    <h1 class="text-left col-md-12 ">
    七牛云存储 - JavaScript SDK
    <a class="btn btn-default view_code" id="show_code">
    查看初始化代码
    </a>
    <a class="btn btn-default view_github" href="https://github.com/qiniupd/qiniu-js-sdk" target="_blank">
    <img src="./GitHub-Mark-32px.png">
    View Source on Github
    </a>
    </h1>
    </div>
    <div class="body">
    <!-- <div class="col-md-12" id="qiniu-js-sdk-log"></div> -->
    </div>
    <div class="modal fade body" id="myModal-code" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title" id="myModalLabel">查看初始化代码</h4>
    </div>
    <div class="modal-body">
    <pre><code class="javascript">
    <span class="comment">//引入Plupload 、qiniu.js后</span>
    <span class="keyword">var</span> uploader = Qiniu.uploader({
    runtimes: <span class="string">'html5,flash,html4'</span>, <span class="comment">//上传模式,依次退化</span>
    browse_button: <span class="string">'pickfiles'</span>, <span class="comment">//上传选择的点选按钮,**必需**</span>
    uptoken_url: <span class="string">'/token'</span>, <span class="comment">//Ajax请求upToken的Url,**强烈建议设置**(服务端提供)</span>
    <span class="comment">// uptoken : '<your upload="" token="">', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成</your></span><your upload="" token="">
    <span class="comment">// unique_names: true, // 默认 false,key为文件名。若开启该选项,SDK为自动生成上传成功后的key(文件名)。</span>
    <span class="comment">// save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`,则开启,SDK会忽略对key的处理</span>
    domain: <span class="string">'http://qiniu-plupload.qiniudn.com/'</span>, <span class="comment">//bucket 域名,下载资源时用到,**必需**</span>
    get_new_uptoken: <span class="literal">false</span>, <span class="comment">//设置上传文件的时候是否每次都重新获取新的token</span>
    container: <span class="string">'container'</span>, <span class="comment">//上传区域DOM ID,默认是browser_button的父元素,</span>
    max_file_size: <span class="string">'100mb'</span>, <span class="comment">//最大文件体积限制</span>
    flash_swf_url: <span class="string">'js/plupload/Moxie.swf'</span>, <span class="comment">//引入flash,相对路径</span>
    max_retries: <span class="number">3</span>, <span class="comment">//上传失败最大重试次数</span>
    dragdrop: <span class="literal">true</span>, <span class="comment">//开启可拖曳上传</span>
    drop_element: <span class="string">'container'</span>, <span class="comment">//拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传</span>
    chunk_size: <span class="string">'4mb'</span>, <span class="comment">//分块上传时,每片的体积</span>
    auto_start: <span class="literal">true</span>, <span class="comment">//选择文件后自动上传,若关闭需要自己绑定事件触发上传</span>
    init: {
    <span class="string">'FilesAdded'</span>: <span class="keyword">function</span>(up, files) {
    plupload.each(files, <span class="keyword">function</span>(file) {
    <span class="comment">// 文件添加进队列后,处理相关的事情</span>
    });
    },
    <span class="string">'BeforeUpload'</span>: <span class="keyword">function</span>(up, file) {
    <span class="comment">// 每个文件上传前,处理相关的事情</span>
    },
    <span class="string">'UploadProgress'</span>: <span class="keyword">function</span>(up, file) {
    <span class="comment">// 每个文件上传时,处理相关的事情</span>
    },
    <span class="string">'FileUploaded'</span>: <span class="keyword">function</span>(up, file, info) {
    <span class="comment">// 每个文件上传成功后,处理相关的事情</span>
    <span class="comment">// 其中 info 是文件上传成功后,服务端返回的json,形式如</span>
    <span class="comment">// {</span>
    <span class="comment">// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",</span>
    <span class="comment">// "key": "gogopher.jpg"</span>
    <span class="comment">// }</span>
    <span class="comment">// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html</span>

    <span class="comment">// var domain = up.getOption('domain');</span>
    <span class="comment">// var res = parseJSON(info);</span>
    <span class="comment">// var sourceLink = domain + res.key; 获取上传成功后的文件的Url</span>
    },
    <span class="string">'Error'</span>: <span class="keyword">function</span>(up, err, errTip) {
    <span class="comment">//上传出错时,处理相关的事情</span>
    },
    <span class="string">'UploadComplete'</span>: <span class="keyword">function</span>() {
    <span class="comment">//队列文件处理完毕后,处理相关的事情</span>
    },
    <span class="string">'Key'</span>: <span class="keyword">function</span>(up, file) {
    <span class="comment">// 若想在前端对每个文件的key进行个性化处理,可以配置该函数</span>
    <span class="comment">// 该配置必须要在 unique_names: false , save_key: false 时才生效</span>

    <span class="keyword">var</span> key = <span class="string">""</span>;
    <span class="comment">// do something with key here</span>
    <span class="keyword">return</span> key
    }
    }
    });

    <span class="comment">// domain 为七牛空间(bucket)对应的域名,选择某个空间后,可通过"空间设置-&gt;基本设置-&gt;域名设置"查看获取</span>

    <span class="comment">// uploader 为一个plupload对象,继承了所有plupload的方法,参考http://plupload.com/docs</span>
    </your></code></pre>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
    </div>
    </div>
    </div>
    </div>
    <div class="modal fade body" id="myModal-img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title" id="myModalLabel">图片效果查看</h4>
    </div>
    <div class="modal-body">
    <div class="modal-body-wrapper text-center">
    <a href="http://jssdk.demo.qiniu.io/" target="_blank">
    <img src="http://jssdk.demo.qiniu.io/" alt="" data-key="" data-h="">
    </a>
    </div>
    <div class="modal-body-footer">
    <div class="watermark">
    <span>水印控制:</span>
    <a href="http://jssdk.demo.qiniu.io/#" data-watermark="NorthWest" class="btn btn-default">
    左上角
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-watermark="SouthWest" class="btn btn-default">
    左下角
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-watermark="NorthEast" class="btn btn-default">
    右上角
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-watermark="SouthEast" class="btn btn-default disabled">
    右下角
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-watermark="false" class="btn btn-default">
    无水印
    </a>
    </div>
    <div class="imageView2">
    <span>缩略控制:</span>
    <a href="http://jssdk.demo.qiniu.io/#" data-imageview="large" class="btn btn-default disabled">
    大缩略图
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-imageview="middle" class="btn btn-default">
    中缩略图
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-imageview="small" class="btn btn-default">
    小缩略图
    </a>
    </div>
    <div class="imageMogr2">
    <span>高级控制:</span>
    <a href="http://jssdk.demo.qiniu.io/#" data-imagemogr="left" class="btn btn-default no-disable-click">
    逆时针
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-imagemogr="right" class="btn btn-default no-disable-click">
    顺时针
    </a>
    <a href="http://jssdk.demo.qiniu.io/#" data-imagemogr="no-rotate" class="btn btn-default">
    无旋转
    </a>
    </div>
    <div class="text-warning">
    备注:小图片水印效果不明显,建议使用大图片预览水印效果
    </div>
    </div>
    </div>
    <div class="modal-footer">
    <span class="pull-left">本示例仅演示了简单的图片处理效果,了解更多请点击</span>

    <a href="https://github.com/SunLn/qiniu-js-sdk" target="_blank" class="pull-left">本SDK文档</a>
    <span class="pull-left">或</span>

    <a href="http://developer.qiniu.com/docs/v6/api/reference/fop/image/" target="_blank" class="pull-left">七牛官方文档</a>

    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
    </div>
    </div>
    </div>
    </div>
    </div>


    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./bootstrap.min.js"></script>
    <script type="text/javascript" src="./moxie.js"></script>
    <script type="text/javascript" src="./plupload.dev.js"></script>
    <!-- <script type="text/javascript" src="bower_components/plupload/js/plupload.full.min.js"></script> -->
    <script type="text/javascript" src="./zh_CN.js"></script>
    <script type="text/javascript" src="./ui.js"></script>
    <script type="text/javascript" src="./qiniu.js"></script>
    <script type="text/javascript" src="./highlight.js"></script>
    <script type="text/javascript" src="./main.js"></script>
    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
    <script type="text/javascript">
    document.querySelector("#container").addEventListener("change", function(e) {
    console.log("do something with " + this.value);
    });
    var keys ;
    var uploader = Qiniu.uploader({
    runtimes: 'html5,html4', // 上传模式,依次退化
    browse_button: 'pickfiles', // 上传选择的点选按钮,**必需**
    container: 'container', //上传区域DOM ID,默认是browser_button的父元素,
    drop_element: 'container',
    // flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
    dragdrop: true,
    chunk_size: '4mb',
    //unique_names: true,
    domain:"https://fs.bozhong.com/", //bucket 域名,下载资源时用到,**必需**
    // save_key: true,
    // uptoken_url: $('#uptoken_url').val(),
    // uptoken:"um6IEH7mtwnwkGpjImD08JdxlvViuELhI4mFfoeL:zPVaMyRvtEgsfbKKuIPpMobH6nc=:eyJzY29wZSI6ImphdmFkZW1vIiwiZGVhZGxpbmUiOjIzNjY1NjI3MjZ9Cg==",
    get_new_uptoken: true, //设置上传文件的时候是否每次都重新获取新的token
    multi_selection: !(mOxie.Env.OS.toLowerCase()==="ios"),


    filters : {
    max_file_size : '100mb',
    prevent_duplicates: true,
    //Specify what files to browse for
    mime_types: [
    // {title : "mp4 files", extensions : "mkv"}
    // {title : "flv files", extensions : "flv,jpg"}
    {title : "Video files", extensions : "flv,mpg,mpeg,avi,wmv,mov,asf,rm,rmvb,mkv,m4v,mp4"}
    // {title : "Video files", extensions : "avi,mp4,wmv,mpg,mov,flv,mkv,mpeg"}
    // {title : "Image files", extensions : "jpg,gif,png"}
    // {title : "Zip files", extensions : "zip"}
    ]
    },
    uptoken_func: function(){

    var ajax = new XMLHttpRequest();
    ajax.open('GET', $('#uptoken_url').val(), false);
    ajax.setRequestHeader("If-Modified-Since", "0");
    ajax.send();

    if (ajax.status === 200) {

    var res = JSON.parse(ajax.responseText);
    console.log('custom uptoken_func:' + res.token);
    keys = res.key;
    return res.token;
    } else {
    console.log('custom uptoken_func err');
    return '';
    }
    },

    // get_new_uptoken: true,
    // downtoken_url: '/downtoken',
    // unique_names: true,
    // save_key: true,
    // x_vars: {
    // 'id': '1234',
    // 'time': function(up, file) {
    // var time = (new Date()).getTime();
    // // do something with 'time'
    // return time;
    // },
    // },
    auto_start: true,
    log_level: 5,
    init: {
    'FilesAdded': function(up, files) {
    $('table').show();
    $('#success').hide();
    plupload.each(files, function(file) {
    var progress = new FileProgress(file, 'fsUploadProgress');
    progress.setStatus("等待...");
    progress.bindUploadCancel(up);
    });
    },
    'BeforeUpload': function(up, file) {
    // 每个文件上传前,处理相关的事情
    var progress = new FileProgress(file, 'fsUploadProgress');
    var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
    if (up.runtime === 'html5' && chunk_size) {
    progress.setChunkProgess(chunk_size);
    }
    },
    'UploadProgress': function(up, file) {
    var progress = new FileProgress(file, 'fsUploadProgress');
    var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
    progress.setProgress(file.percent + "%", file.speed, chunk_size);
    },
    'UploadComplete': function() {
    $('#success').show();
    },
    'FileUploaded': function(up, file, info) {
    // 每个文件上传成功后,处理相关的事情

    var progress = new FileProgress(file, 'fsUploadProgress');
    progress.setComplete(up, info);
    },
    'Error': function(up, err, errTip) {
    $('table').show();
    var progress = new FileProgress(err.file, 'fsUploadProgress');
    progress.setError();
    progress.setStatus(errTip);
    }
    ,
    'Key': function(up, file) {
    var key = keys;

    return key
    }
    }
    });

    uploader.bind('FileUploaded', function() {
    console.log('hello man,a file is uploaded');
    });
    </script>

    </body></html>

  • 相关阅读:
    全面理解javascript的caller,callee,call,apply概念(修改版)
    动态显示更多信息(toggle_visible函数的运用)
    再论call和apply
    RSS News Module的应用
    准备制作一套全新的DNN皮肤(包括个人定制或企业级定制)
    ControlPanel研究系列二:简单Ajax模式的ControlPanel(SimplAjax)
    New_Skin发布了....
    如何定制dnn的FckEditor
    Blog已迁移到dnnsun.com(最新DotNetNuke咨询平台)
    新DNN皮肤的经验及成果分享
  • 原文地址:https://www.cnblogs.com/weixinsb/p/12855805.html
Copyright © 2011-2022 走看看