getting-started-md5.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // 文件上传
  2. jQuery(function() {
  3. var $ = jQuery,
  4. $list = $('#thelist'),
  5. $btn = $('#ctlBtn'),
  6. state = 'pending',
  7. uploader;
  8. uploader = WebUploader.create({
  9. // 不压缩image
  10. resize: false,
  11. // 文件接收服务端。
  12. server: server_url,
  13. // 选择文件的按钮。可选。
  14. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  15. pick: '#picker'
  16. }).on('fileQueued', function( file ) {
  17. $list.append( '<div id="' + file.id + '" class="item">' +
  18. '<h4 class="info">' + file.name + '</h4>' +
  19. '<p class="state">等待上传...</p>' +
  20. '</div>' );
  21. // 返回的是 promise 对象
  22. this.md5File(file, 0, 2000 * 1024 * 1024)
  23. // 可以用来监听进度
  24. .progress(function(percentage) {
  25. var $li = $( '#'+file.id );
  26. $li.find('p.state').text('上传中……'+ Math.floor(percentage * 100) + '%');
  27. if (percentage == 1) {
  28. $( '#'+file.id ).find('p.state').text('已上传,处理中……');
  29. }
  30. })
  31. // 完成
  32. .then(function(val) {
  33. $( '#'+file.id ).find('p.state').text('上传成功');
  34. });
  35. });
  36. uploader.on( 'all', function( type ) {
  37. if ( type === 'startUpload' ) {
  38. state = 'uploading';
  39. } else if ( type === 'stopUpload' ) {
  40. state = 'paused';
  41. } else if ( type === 'uploadFinished' ) {
  42. state = 'done';
  43. }
  44. if ( state === 'uploading' ) {
  45. $btn.text('暂停上传');
  46. } else {
  47. $btn.text('开始上传');
  48. }
  49. });
  50. $btn.on( 'click', function() {
  51. if ( state === 'uploading' ) {
  52. uploader.stop();
  53. } else {
  54. uploader.upload();
  55. }
  56. });
  57. });