uploader.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var server='https://demo.dcloud.net.cn/helloh5/uploader/upload.php';
  12. var files=[];
  13. // 上传文件
  14. function upload(){
  15. if(files.length<=0){
  16. plus.nativeUI.alert('没有添加上传文件!');
  17. return;
  18. }
  19. outSet('开始上传:');
  20. var wt=plus.nativeUI.showWaiting();
  21. var task=plus.uploader.createUpload(server,
  22. {method:'POST'},
  23. function(t,status){ //上传完成
  24. plus.nativeUI.closeWaiting();
  25. if(status==200){
  26. outLine('上传成功:'+t.responseText);
  27. plus.storage.setItem('uploader', t.responseText);
  28. clicked('uploader_ret.html');
  29. }else{
  30. outLine('上传失败:'+status);
  31. wt.close();
  32. }
  33. }
  34. );
  35. task.addData('client', 'HelloH5+');
  36. task.addData('uid', getUid());
  37. for(var i=0;i<files.length;i++){
  38. var f=files[i];
  39. task.addFile(f.path, {key:f.name});
  40. }
  41. task.start();
  42. }
  43. // 拍照添加文件
  44. function appendByCamera(){
  45. plus.camera.getCamera().captureImage(function(p){
  46. appendFile(p);
  47. });
  48. }
  49. // 从相册添加文件
  50. function appendByGallery(){
  51. plus.gallery.pick(function(p){
  52. appendFile(p);
  53. });
  54. }
  55. // 添加文件
  56. var index=1;
  57. function appendFile(p){
  58. var fe=document.getElementById("files");
  59. var li=document.createElement("li");
  60. var n=p.substr(p.lastIndexOf('/')+1);
  61. li.innerText=n;
  62. fe.appendChild(li);
  63. files.push({name:"uploadkey"+index,path:p});
  64. index++;
  65. empty.style.display="none";
  66. }
  67. // 产生一个随机数
  68. function getUid(){
  69. return Math.floor(Math.random()*100000000+10000000).toString();
  70. }
  71. </script>
  72. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  73. </head>
  74. <body>
  75. <br/>
  76. <p class="heading">上传文件列表:</p>
  77. <ul id="files" style="text-align:left;">
  78. <p id="empty" style="font-size:12px;color:#C6C6C6;">无上传文件</p>
  79. </ul>
  80. <table style="width:100%;">
  81. <tbody>
  82. <tr>
  83. <td style="width:40%"><div class="button button-select" onclick="appendByCamera()">拍照</div></td>
  84. <td style="width:40%"><div class="button button-select" onclick="appendByGallery()">相册选取</div></td>
  85. </tr>
  86. </tbody>
  87. </table>
  88. <br/>
  89. <div class="button" onclick="upload()">上 传</div>
  90. <br/>
  91. <!--<ul class="dlist">
  92. <li class="ditem" onclick="appendByCamera()">拍照添加文件</li>
  93. <li class="ditem" onclick="appendByGallery()">相册添加文件</li>
  94. </ul>-->
  95. <div id="outpos"/>
  96. <div id="output">
  97. Uploader用于管理文件的上传,用于从本地上传各种文件到网络服务器,支持跨域访问操作。
  98. </div>
  99. </body>
  100. </html>