uploadFile.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. *
  3. */
  4. $(function(){
  5. $.upLoadDefaults = $.upLoadDefaults || {};
  6. $.upLoadDefaults.property = {
  7. multiple: false, //是否多文件
  8. sendurl: null, //发送地址
  9. filesize: "2048", //文件大小
  10. btntext: "浏览...", //上传按钮的文字
  11. swf: null //SWF上传控件相对地址
  12. };
  13. $.fn.InitUploadFile = function(b){
  14. var fun = function (parentObj) {
  15. var p = $.extend({}, $.upLoadDefaults.property, b || {});
  16. var btnObj = $('<div class="upload-btn btn-success"><i class="fa fa-plus"></i>&nbsp;' + p.btntext + '</div>').appendTo(parentObj);
  17. var uploader = WebUploader.create({
  18. auto: true, //自动上传
  19. // swf文件路径
  20. swf: p.swf,
  21. // 文件接收服务端。
  22. server: p.sendurl,
  23. // 选择文件的按钮。可选。
  24. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  25. pick: '#picker',
  26. // formData: {
  27. // 'type': p.file_type //定义参数
  28. // },
  29. fileVal: 'Filedata', //上传域的名称
  30. // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  31. resize: false
  32. });
  33. // // 当有文件被添加进队列的时候
  34. // uploader.on( 'fileQueued', function( file ) {
  35. // $list.append( '<div id="' + file.id + '" class="item">' +
  36. // '<h4 class="info">' + file.name + '</h4>' +
  37. // '<p class="state">等待上传...</p>' +
  38. // '</div>' );
  39. // });
  40. // 当有文件被添加进队列的时候
  41. uploader.on( 'fileQueued', function( file ) {
  42. $list.append( '<div id="' + file.id + '" class="item">' +
  43. '<h4 class="info">' + file.name + '</h4>' +
  44. '<p class="state">等待上传...</p>' +
  45. '</div>' );
  46. });
  47. // 文件上传过程中创建进度条实时显示。
  48. uploader.on( 'uploadProgress', function( file, percentage ) {
  49. var $li = $( '#'+file.id ),
  50. $percent = $li.find('.progress .progress-bar');
  51. // 避免重复创建
  52. if ( !$percent.length ) {
  53. $percent = $('<div class="progress progress-striped active">' +
  54. '<div class="progress-bar" role="progressbar" style="width: 0%">' +
  55. '</div>' +
  56. '</div>').appendTo( $li ).find('.progress-bar');
  57. }
  58. $li.find('p.state').text('上传中');
  59. $percent.css( 'width', percentage * 100 + '%' );
  60. });
  61. uploader.on( 'uploadSuccess', function( file ) {
  62. $( '#'+file.id ).find('p.state').text('已上传');
  63. });
  64. uploader.on( 'uploadError', function( file ) {
  65. $( '#'+file.id ).find('p.state').text('上传出错');
  66. });
  67. uploader.on( 'uploadComplete', function( file ) {
  68. $( '#'+file.id ).find('.progress').fadeOut();
  69. });
  70. }
  71. return $(this).each(function () {
  72. fun($(this));
  73. });
  74. }
  75. });