PageRenderTime 43ms CodeModel.GetById 18ms RepoModel.GetById 0ms app.codeStats 0ms

/gallery/form/1.1/demo/form/uploader/method-uploader.html

https://github.com/akecn/kissy-gallery
HTML | 92 lines | 87 code | 2 blank | 3 comment | 0 complexity | f948ef6baf53c62c24519436cb2cecad MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8"/>
    5. 

  5. <title>Uploader方法测试</title>
    6. 

  6. <link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
    7. 

  7. <link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
    8. 

  8. <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11. <article id="doc">
    12. 

  12.     <h4>Uploader方法测试</h4>
    13. 

  13.     <p>请先多选择几个文件</p>
    14. 

  14.     <a id="J_UploaderBtn" class="uploader-button" data-config=
    15. 

  15.             '{"type" : "auto",
    16. 

  16.             "autoUpload" : false,
    17. 

  17.            "serverConfig":{"action":"upload.php","data":{"dir":"files/"},"dataType" : "json"},
    18. 

  18.            "name":"Filedata",
    19. 

  19.            "urlsInputName":"fileUrls"}'
    20. 

  20.        href="#">
    21. 

  21.         选择要上传的文件
    22. 

  22.     </a>
    23. 

  23.     <!-- 文件上传队列 -->
    24. 

  24.     <ul id="J_UploaderQueue">
    25. 

  25. 

  26.     </ul>
    27. 

  27.     <div class="btn-wrapper">
    28. 

  28.         <input id="J_Upload" type="button" value="上传第一个文件">
    29. 

  29.         <input id="J_UploadFiles" type="button" value="上传所有等待中的文件">
    30. 

  30.         <input id="J_Cancel" type="button" value="取消正在文件的上传">
    31. 

  31.         <input id="J_Stop" type="button" value="停止上传">
    32. 

  32.     </div>
    33. 

  33.     <h5>upload(index)：上传指定队列索引的文件</h5>
    34. 

  34.     上传队列中的第一个文件（等待状态）：
    35. 

  35.     <pre class='brush: js;'>
    36. 

  36.         uploader.upload(0);
    37. 

  37.     </pre>
    38. 

  38.     <h5>uploadFiles(status)：批量上传队列中的指定状态下的文件</h5>
    39. 

  39.     <p>上传所有等待中的文件</p>
    40. 

  40.     <pre class='brush: js;'>
    41. 

  41.         uploader.uploadFiles('waiting');
    42. 

  42.     </pre>
    43. 

  43.     无参时默认为'waiting'。
    44. 

  44.     <h5>cancel(index)：取消当前正在上传的文件的上传</h5>
    45. 

  45.     <pre class='brush: js;'>
    46. 

  46.         uploader.cancel();
    47. 

  47.     </pre>
    48. 

  48.     <p>带参数时，将改变文件的状态为“取消”，留意无法改变上传成功的文件状态。</p>
    49. 

  49.     <h5>stop()：停止上传动作</h5>
    50. 

  50.     <pre class='brush: js;'>
    51. 

  51.         uploader.stop();
    52. 

  52.     </pre>
    53. 

  53. </article>
    54. 

  54. <script>
    55. 

  55.     var S = KISSY, $ = S.Node.all;
    56. 

  56.     S.config({
    57. 

  57.         packages:[
    58. 

  58.             {
    59. 

  59.                 name:"gallery",
    60. 

  60.                 path:"../../../../../../",
    61. 

  61.                 charset:"utf-8"
    62. 

  62.             }
    63. 

  63.         ]
    64. 

  64.     });
    65. 

  65.     //加载上传组件入口文件
    66. 

  66.     KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
    67. 

  67.         var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
    68. 

  68.         ru.on("init",function(ev){
    69. 

  69.             var uploader = ev.uploader;
    70. 

  70.             $('#J_Upload').on('click',function(){
    71. 

  71.                 uploader.upload(0);
    72. 

  72.             });
    73. 

  73.             $('#J_UploadFiles').on('click',function(){
    74. 

  74.                 uploader.uploadFiles('waiting');
    75. 

  75.             });
    76. 

  76.             $('#J_Cancel').on('click',function(){
    77. 

  77.                 uploader.cancel();
    78. 

  78.             });
    79. 

  79.             $('#J_Stop').on('click',function(){
    80. 

  80.                 uploader.stop();
    81. 

  81.             });
    82. 

  82.         })
    83. 

  83.     })
    84. 

  84. </script>
    85. 

  85. 

  86. <!-- 代码高亮 START  -->
    87. 

  87. <link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
    88. 

  88. <script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
    89. 

  89. <script type="text/javascript">SyntaxHighlighter.all();</script>
    90. 

  90. <!-- 代码高亮 END  -->
    91. 

  91. </body>
    92. 

  92. </html>
    93. 

  93.