No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

getting-started.js 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. var uploader;
  2. // 文件上传
  3. jQuery(function() {
  4. var $ = jQuery,
  5. $list = $('#thelist'),
  6. $btn = $('#ctlBtn'),
  7. $picker = $('#picker'),
  8. state = 'pending';
  9. uploader = WebUploader.create({
  10. // 不压缩image
  11. resize: false,
  12. // swf文件路径
  13. swf: uploader_swf,
  14. // 文件接收服务端。
  15. server: server_url,
  16. // 选择文件的按钮。可选。
  17. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  18. pick: '#picker'
  19. });
  20. // 当有文件添加进来的时候
  21. uploader.on( 'fileQueued', function( file ) {
  22. $list.append( '<div id="' + file.id + '" class="item">' +
  23. '<h4 class="info">' + file.name + '&nbsp;&nbsp;' +
  24. '<a href="javascript:void(0);" onclick="del_WU_FILE(\'' + file.id + '\');">[删除]</a></h4>' +
  25. '<p class="state">等待上传...</p>' +
  26. '<input type="hidden" name="fileupload[]" value=""/>' +
  27. '<input type="hidden" name="fileSize[]" value=""/>' +
  28. '<input type="hidden" name="fileMime[]" value=""/>' +
  29. '<input type="hidden" name="uhash[]" value=""/>' +
  30. '<input type="hidden" name="md5file[]" value=""/>' +
  31. '</div>' );
  32. });
  33. // 文件上传过程中创建进度条实时显示。
  34. uploader.on( 'uploadProgress', function( file, percentage ) {
  35. var $li = $( '#'+file.id );
  36. // var $percent = $li.find('.progress .progress-bar');
  37. // 避免重复创建
  38. // if ( !$percent.length ) {
  39. // $percent = $('<div class="progress progress-striped active">' +
  40. // '<div class="progress-bar" role="progressbar" style="width: 0%">' +
  41. // '</div>' +
  42. // '</div>').appendTo( $li ).find('.progress-bar');
  43. // }
  44. $li.find('p.state').text('上传中……'+ Math.floor(percentage * 100) + '%');
  45. if (percentage == 1) {
  46. $( '#'+file.id ).find('p.state').text('处理中……');
  47. }
  48. // $percent.css( 'width', percentage * 100 + '%' );
  49. });
  50. uploader.on( 'uploadSuccess', function( file, res ) {
  51. if (res.error.code == 0) {
  52. $( '#'+file.id ).find("input[name^=fileupload]").val(res.error.path);
  53. $( '#'+file.id ).find("input[name^=fileSize]").val(file.size);
  54. $( '#'+file.id ).find("input[name^=fileMime]").val(res.error.mime);
  55. $( '#'+file.id ).find("input[name^=uhash]").val(res.error.uhash);
  56. $( '#'+file.id ).find("input[name^=md5file]").val(res.error.md5file);
  57. $( '#'+file.id ).find('p.state').text('已上传,记得提交保存');
  58. } else {
  59. $( '#'+file.id ).find('p.state').text(res.error.msg + ',删掉重新选择');
  60. try {
  61. uploader.removeFile(file.id, true);
  62. } catch(e) {
  63. // 出现异常以后执行的代码
  64. // e:exception,用来捕获异常的信息
  65. }
  66. showErrorMsg(res.error.msg);
  67. return false;
  68. }
  69. });
  70. uploader.on( 'uploadError', function( file, e ) {
  71. $( '#'+file.id ).find('p.state').html('<em style="color:red;">上传出错,可能超过服务器设定的文件大小</em>');
  72. });
  73. uploader.on( 'uploadComplete', function( file ) {
  74. // $( '#'+file.id ).find('.progress').fadeOut();
  75. });
  76. uploader.on( 'all', function( type ) {
  77. if ( type === 'startUpload' ) {
  78. state = 'uploading';
  79. } else if ( type === 'stopUpload' ) {
  80. state = 'paused';
  81. } else if ( type === 'uploadFinished' ) {
  82. state = 'done';
  83. }
  84. if ( state === 'uploading' ) {
  85. $btn.text('暂停上传');
  86. } else {
  87. $btn.text('开始上传');
  88. }
  89. });
  90. $btn.on( 'click', function() {
  91. if ( state === 'uploading' ) {
  92. uploader.stop();
  93. } else {
  94. var len = $( '#thelist' ).find("input[name^=fileupload]").length;
  95. if (parseInt(len) > 0) {
  96. uploader.upload();
  97. } else {
  98. layer.alert('请选择上传的文件!', {icon: 5});
  99. return false;
  100. }
  101. }
  102. });
  103. });
  104. function del_WU_FILE(id)
  105. {
  106. try {
  107. uploader.removeFile(id, true);
  108. } catch(e) {
  109. // 出现异常以后执行的代码
  110. // e:exception,用来捕获异常的信息
  111. }
  112. $('#'+id).remove();
  113. }