getting-started.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. // 文件上传
  2. jQuery(function() {
  3. var $ = jQuery,
  4. $list = $('#thelist'),
  5. $btn = $('#ctlUpBtn'),
  6. state = 'pending',
  7. uploader;
  8. uploader = WebUploader.create({
  9. // 不压缩image
  10. resize: false,
  11. // swf文件路径
  12. swf: BASE_URL + '/js/Uploader.swf',
  13. // 文件接收服务端。
  14. server: 'http://webuploader.duapp.com/server/fileupload.php',
  15. // 选择文件的按钮。可选。
  16. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  17. pick: '#picker'
  18. });
  19. // 当有文件添加进来的时候
  20. uploader.on( 'fileQueued', function( file ) {
  21. $list.append( '<div id="' + file.id + '" class="item">' +
  22. '<h4 class="info">' + file.name + '</h4>' +
  23. '<p class="state">等待上传...</p>' +
  24. '</div>' );
  25. });
  26. // 文件上传过程中创建进度条实时显示。
  27. uploader.on( 'uploadProgress', function( file, percentage ) {
  28. var $li = $( '#'+file.id ),
  29. $percent = $li.find('.progress .progress-bar');
  30. // 避免重复创建
  31. if ( !$percent.length ) {
  32. $percent = $('<div class="progress progress-striped active">' +
  33. '<div class="progress-bar" role="progressbar" style="width: 0%">' +
  34. '</div>' +
  35. '</div>').appendTo( $li ).find('.progress-bar');
  36. }
  37. $li.find('p.state').text('上传中');
  38. $percent.css( 'width', percentage * 100 + '%' );
  39. });
  40. uploader.on( 'uploadSuccess', function( file ) {
  41. $( '#'+file.id ).find('p.state').text('已上传');
  42. });
  43. uploader.on( 'uploadError', function( file ) {
  44. $( '#'+file.id ).find('p.state').text('上传出错');
  45. });
  46. uploader.on( 'uploadComplete', function( file ) {
  47. $( '#'+file.id ).find('.progress').fadeOut();
  48. });
  49. uploader.on( 'all', function( type ) {
  50. if ( type === 'startUpload' ) {
  51. state = 'uploading';
  52. } else if ( type === 'stopUpload' ) {
  53. state = 'paused';
  54. } else if ( type === 'uploadFinished' ) {
  55. state = 'done';
  56. }
  57. if ( state === 'uploading' ) {
  58. $btn.text('暂停上传');
  59. } else {
  60. $btn.text('开始上传');
  61. }
  62. });
  63. $btn.on( 'click', function() {
  64. if ( state === 'uploading' ) {
  65. uploader.stop();
  66. } else {
  67. uploader.upload();
  68. }
  69. });
  70. });
  71. // 图片上传demo
  72. jQuery(function() {
  73. var $ = jQuery,
  74. $list = $('#fileNameList'),
  75. // 优化retina, 在retina下这个值是2
  76. ratio = window.devicePixelRatio || 1,
  77. // 缩略图大小
  78. thumbnailWidth = 100 * ratio,
  79. thumbnailHeight = 100 * ratio,
  80. // Web Uploader实例
  81. uploader;
  82. // 初始化Web Uploader
  83. uploader = WebUploader.create({
  84. // 自动上传。
  85. auto: true,
  86. // swf文件路径
  87. swf: BASE_URL + '/js/Uploader.swf',
  88. // 文件接收服务端。
  89. server: 'http://webuploader.duapp.com/server/fileupload.php',
  90. // 选择文件的按钮。可选。
  91. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  92. pick: '#fileNamePicker',
  93. // 只允许选择文件,可选。
  94. accept: {
  95. title: 'Images',
  96. extensions: 'gif,jpg,jpeg,bmp,png',
  97. mimeTypes: 'image/*'
  98. }
  99. });
  100. // 当有文件添加进来的时候
  101. uploader.on( 'fileQueued', function( file ) {
  102. var $li = $(
  103. '<div id="' + file.id + '" class="file-item thumbnail">' +
  104. '<img>' +
  105. '<div class="info">' + file.name + '</div>' +
  106. '</div>'
  107. ),
  108. $img = $li.find('img');
  109. $list.append( $li );
  110. // 创建缩略图
  111. uploader.makeThumb( file, function( error, src ) {
  112. if ( error ) {
  113. $img.replaceWith('<span>不能预览</span>');
  114. return;
  115. }
  116. $img.attr( 'src', src );
  117. }, thumbnailWidth, thumbnailHeight );
  118. });
  119. // 文件上传过程中创建进度条实时显示。
  120. uploader.on( 'uploadProgress', function( file, percentage ) {
  121. var $li = $( '#'+file.id ),
  122. $percent = $li.find('.progress span');
  123. // 避免重复创建
  124. if ( !$percent.length ) {
  125. $percent = $('<p class="progress"><span></span></p>')
  126. .appendTo( $li )
  127. .find('span');
  128. }
  129. $percent.css( 'width', percentage * 100 + '%' );
  130. });
  131. // 文件上传成功,给item添加成功class, 用样式标记上传成功。
  132. uploader.on( 'uploadSuccess', function( file ) {
  133. $( '#'+file.id ).addClass('upload-state-done');
  134. });
  135. // 文件上传失败,现实上传出错。
  136. uploader.on( 'uploadError', function( file ) {
  137. var $li = $( '#'+file.id ),
  138. $error = $li.find('div.error');
  139. // 避免重复创建
  140. if ( !$error.length ) {
  141. $error = $('<div class="error"></div>').appendTo( $li );
  142. }
  143. $error.text('上传失败');
  144. });
  145. // 完成上传完了,成功或者失败,先删除进度条。
  146. uploader.on( 'uploadComplete', function( file ) {
  147. $( '#'+file.id ).find('.progress').remove();
  148. });
  149. });