webuploader使⽤⼼得
1、基本⽤法
$(function(){…}); jQuery(function($) {…}); $(document).ready(function(){…})这三个的作⽤是⼀样的，本⼈⽐较需要⽤第⼀种、书写简单。⽂档载⼊完成后执⾏的函数。
[html]
01. //⼀个div⽤来存放⽂件上传时的信息
02. //⼀个div⽤来存放上传相关的按钮
03. <link rel="stylesheet"type="text/css"href="./web-uploader/webuploader.css"/>
04. <!--<script src="./jQuery/jquery-2.2.3.min.js"></script>-->
05. <script type="text/javascript"src="./web-uploader/webuploader.js"></script>
06. <div id="uploader"class="wu-example">
07. <!--⽤来存放⽂件信息-->
08. <div id="thelist"class="uploader-list"></div>
09. <div class="btns">
10. <div id="picker">选择⽂件</div>
11. <button id="ctlBtn"class="btn btn-default">开始上传</button>
12. <button id="goBack"class="btn btn-default">返回</button>
13. </div>
14. </div>
15. /*
16. 1、⾸先⽤ate创建⼀个 WebUploader对象，并在create中添加⾃定义配置项
17. 2、然后⼿动给WebUploader对象添加事件，⽤到的基本事件是
源码加密怎么破解18. fileQueued ⽂件被添加进队列的时候，在thelist div 中显⽰⽂件信息
19. uploadProgress ⽂件上传过程中创建进度条实时显⽰
20. uploadSuccess
21. uploadError
22. uploadComplete 在⽂件上传完后都会触发uploadComplete事件
23. 3、最后调⽤upload()⽅法实现上传，
24. */
25. <script>
26. var uploader = ate({
27.
28. // swf⽂件路径
29. swf: '/js/Uploader.swf',
30. formData:{"dn":$("#requestDn").val()},//参数列表
31. // ⽂件接收服务端。
32. server: '/tp5/index/user/uploadFile',
33. // 选择⽂件的按钮。可选。
34. // 内部根据当前运⾏是创建，可能是input元素，也可能是flash.
35. pick: '#picker',
36. // 不压缩image, 默认如果是jpeg，⽂件上传前会压缩⼀把再上传！
37. resize: false,
38. // 只允许选择图⽚⽂件。
39. accept: {
40. title: 'file',
41. extensions: 'cer'
42. // mimeTypes: '.cer,'
43. }
44. });
45. var $list = $("#thelist");mysqlorderby排序
克鲁斯卡尔沃利斯46. ( 'fileQueued', function( file ) {
47. $list.append( '<div id="' + file.id + '"class="item">' +
48. '<h4class="info">' + file.name + '</h4>' +
49. '<p class="state">等待上传...</p>' +
50. '<p class="progress progress-bar">上传进度...</p>' +jquery下载文件进度条
51. '</div>' );
52. });
53.
54. ( 'uploadSuccess', function( file ) {
55. $( '#'+file.id ).find('p.state').text('已上传');
56. });
57. // ⽂件上传过程中创建进度条实时显⽰。
58. ( 'uploadProgress', function( file, percentage ) {
59. var $li = $( '#'+file.id ),
60. $percent = $li.find('.progress .progress-bar');
61.
62. // 避免重复创建
63. if ( !$percent.length ) {
64. $percent = $('<div class="progress progress-striped active">' +
65. '<div class="progress-bar"role="progressbar">' +
66. '</div>' +
67. '</div>').appendTo( $li ).find('.progress-bar');
68. }
69.
70. $li.find('p.state').text('上传中');
2、接⼝说明
这⾥是简单介绍，具体接⼝参考
Web Uploader 内部类的详细说明，以下提及的功能类，都可以在 WebUploader 这个变量中访问到。
也就是说下⾯提到的 Base 类 、Mediator 类 、file 类 、Queue 类 都可以直接⽤ WebUploader 创建的变量直接访问， 例如下⾯创建的 uploader 变量，就可以直接访问 Base 类 的 uploader.browser.ie
//Demo 中使⽤的是ate ⽅法来初始化的，实际上可直接访问WebUploader.Uploader
2.1、Uploader 类 上传⼊⼝类
2.1.1、参数说明，下⾯所有参数都是可选的，并且都有默认值70. $li.find('p.state').text('上传中'); 71. 72. $percent.css( 'width', percentage * 100 + '%' ); 7
3. }); 7
4. ( 'uploadError', function( file ) { 7
5. $( '#'+file.id ).find('p.state').text('上传出错'); 7
6. }); 7
7. 7
8. ( 'uploadComplete', function( file ) { 7
9. $( '#'+file.id ).find('.progress').fadeOut(); 80. }); 81. 82. $("#ctlBtn").on('click', function() { 83. uploader.upload(); 84. }); 85. $("#goBack").on('click', function() { 86. $("#uploadFileDiv").empty(); 87. $("#uploadFile").removeClass("hidden"); 88. }); 89. </script> [html]php在线扒站
01. var uploader = WebUploader .Uploader({ 02. //⼏个常⽤的参数：swf,pick,formData,runtimeOrder 03. 04. //所有参数列表 05. swf: 'path_of_swf/Uploader.swf', 06. dnd: '#dndArea', // [默认值：undefined] 指定Drag And Drop 拖拽的容器，如果不指定，则不启动。 07.
disableGlobalDnd: true,, // [默认值：false] 是否禁掉整个页⾯的拖拽功能，如果不禁⽤，图⽚拖进来的时候会默认被浏览器打开 08.
paste: '#uploader', // [默认值：undefined] 指定监听paste 事件的容器，如果不指定，不启⽤此功能。此功能为通过粘贴来添加截屏的图⽚。建议设置为document.body. 09. pick:'#filePicker',//也可以⽤下⾯的⽅式详细配置 10. // {Selector, Object} [默认值：undefined] 指定选择⽂件的按钮容器，不指定则不创建按钮。 11. pick: { 12.
id: '#filePicker',//Seletor|dom 指定选择⽂件的按钮容器，不指定则不创建按钮。注意 这⾥虽然写的是 id, 但是不是只⽀持 id, 还⽀持 class, 或者 dom 节点。 13. label: '点击选择图⽚',//请采⽤ innerHT
ML 代替 14. innerHTML: "点击选择图⽚",// 指定按钮⽂字。不指定时优先从指定的容器中看是否⾃带⽂字。 15. multiple:true //是否开起同时选择多个⽂件能⼒。 16. }, 17. //限制上传的⽂件类型 18. accept: { 19. title: 'Images',// {String} ⽂字描述 20. extensions: 'gif,jpg,jpeg,bmp,png,rar',// {String} 允许的⽂件后缀，不带点，多个⽤逗号分割。 21. mimeTypes: 'image/gif ，image/jpg ，image/jpeg ，image/bmp ，image/png ，.rar'// 多个⽤逗号分割。 22. }, 23. // 设置缩略图。 24. thumb: { 25. width: 110, 26. height: 110, 27. // 图⽚质量，只有type 为`image/jpeg`的时候才有效。 28. quality: 70, 29. // 是否允许放⼤，如果想要⽣成⼩图的时候不失真，此选项应该设置为false. 30. allowMagnify: true, 31. // 是否允许裁剪。是否采⽤裁剪模式。如果采⽤这样可以避免空⽩内容。 32. crop: true, 33. // 为空的话则保留原有图⽚格式。 34. // 否则强制转换成指定的类型。 35. type: 'image/jpeg' 36. }, 37. // 配置压缩的图⽚的选项。如果此选项为false, 则图⽚在上传前不进⾏压缩。 38. compress: { 39. width: 1600, 40. height: 1600, 41. // 图⽚质量，只有type 为`image/jpeg`的时候才有效。 42. quality: 90, 43. // 是否允许放⼤，如果想要⽣成⼩图的时候不失真，此选项应该设置为false.
2.1.2、uploader 对象的选项4
3. // 是否允许放⼤，如果想要⽣成⼩图的时候不失真，此选项应该设置为false. 4
4. allowMagnify: false, 4
5. // 是否允许裁剪。 4
6. crop: false, 4
7. // 是否保留头部meta 信息。 4
8. preserveHeaders: true, 4
9. // 如果发现压缩后⽂件⼤⼩⽐原来还⼤，则使⽤原来图⽚ 50. // 此属性可能会影响图⽚⾃动纠正功能 51. noCompressIfLarger: false, 52. // 单位字节，如果图⽚⼤⼩⼩于此值，不会采⽤压缩。 53. compressSize: 0 54. }, 55. 56. 57. auto: true, // [默认值：false] 设置为 true 后，不需要⼿动调⽤上传，有⽂件选择即开始上传。 58.
runtimeOrder: 'flash', // [默认值：html5,flash] 指定运⾏时启动顺序。默认会想尝试 html5 是否⽀持，如果⽀持则使⽤ html5, 否则则使⽤ flash.可以将此值设置成 flash ，来强制使⽤ flash 运⾏时。 59.
prepareNextFile:false, // [默认值：false] 是否允许在⽂件传输时提前把下⼀个⽂件准备好。 对于⼀个⽂件的准备⼯作⽐较耗时，⽐如图⽚压缩，md5序列化。 如果能提前在当前⽂件传输期处理，可以节
省总体耗时。 60. chunked:false, // [默认值：false] 是否要分⽚处理⼤⽂件上传。 61. chunkSize: 512 * 1024,// [默认值：5242880] 如果要分⽚，分多⼤⼀⽚？ 默认⼤⼩为5M. 62. chunkRetry:2, // [默认值：2] 如果某个分⽚由于⽹络问题出错，允许⾃动重传多少次？ 63. threads:3, // [默认值：3] 上传并发数。允许同时最⼤上传进程数。 64. formData: {"data":"value","data":"value"}, // [默认值：{}] ⽂件上传请求的参数表，每次发送都会发送此对象中的参数。 65. fileVal:"file", // [默认值：'file'] 设置⽂件上传域的name 。 66. method :"POST", // [默认值：'POST'] ⽂件上传⽅式，POST 或者GET 。 67.
sendAsBinary :false, // [默认值：false] 是否已⼆进制的流的⽅式发送⽂件，这样整个上传内容php://input 都为⽂件内容， 其他参数在$_GET 数组中。 68. fileNumLimit :10, // [默认值：undefined] 验证⽂件总数量, 超出则不允许加⼊队列。 69.
fileSizeLimit : 200 * 1024 * 1024, // 200 M [默认值：undefined] 验证⽂件总⼤⼩是否超出限制, 超出则不允许加⼊队列。 70.
fileSingleSizeLimit: 50 * 1024 * 1024, // 50 M [默认值：undefined] 验证单个⽂件⼤⼩是否超出限制, 超出则不允许加⼊队列。 71. duplicate :true, // [默认值：undefined] 去重， 根据⽂件名字、⽂件⼤⼩和最后修改时间来⽣成hash Key. 72.
disableWidgets: {String, Array}, // [默认值：undefined] 默认所有 ister 了的 widget 都会被加载，如果禁⽤某⼀部分，请通过此 option 指定⿊名单。
73. });
[html]
01. 1、option() 获取或者设置Uploader 配置项。 02. // 修改后图⽚上传前，尝试将图⽚压缩到1600 * 1600 03. uploader.option( 'compress', { 04. width: 1600, 05. height: 1600 06. }); 07. 2、getStats() 获取⽂件统计信息。返回⼀个包含⼀下信息的对象。 08. //successNum 上传成功的⽂件数 09. //progressNum 上传中的⽂件数 10. //cancelNum 被删除的⽂件数 11. //invalidNum ⽆效的⽂件数 12. //uploadFailNum 上传失败的⽂件数 13. //queueNum 还在队列中的⽂件数 14. //interruptNum 被暂停的⽂件数 15. stats = uploader .getStats(); 16. if ( stats.successNum && !stats.uploadFailNum ) { 17. setState( 'finish' ); 18. return; 19. } 20. 3、destroy() 销毁 webuploader 实例 21. 4、addButton() 添加⽂件选择按钮，如果⼀个按钮不够，需要调⽤此⽅法来添加。参数跟options.pick ⼀致。 22. uploader.addButton({ 23. id: '#filePicker2', 24. label: '继续添加' 25. }); 26.
5、makeThumb() ⽣成缩略图，此过程为异步，所以需要传⼊callback 。 通常情况在图⽚加⼊队⾥后
调⽤此⽅法来⽣成预览图以增强交互效果。 27. 当 width 或者 height 的值介于 0 - 1 时，被当成百分⽐使⽤。 28. callback 中可以接收到两个参数。 29. 第⼀个为error ，如果⽣成缩略图有错误，此error 将为真。 30. 第⼆个为ret, 缩略图的Data URL 值。 31.
注意 Date URL 在IE6/7中不⽀持，所以不⽤调⽤此⽅法了，直接显⽰⼀张暂不⽀持预览图⽚好了。 也可以借助服务端，将 base64 数据传给服务端，⽣成⼀个临时⽂件供预览。 32. uploader.makeThumb( file, function( error, src ) { 33. var img; 34. 35. if ( error ) { 36. $( '不能预览' );
2.1.3、事件说明javascript this
2.2、Base 类 基础类⽅法 WebUploader 基础类，提供⼀些简单常⽤的⽅法 WebUploader.browser.ie 36. $( '不能预览' ); 37. return; 38. } 39. 40. if( isSupportBase64 ) { 41. img = $('<img src ="'+src+'">'); 42. $pty().append( img ); 4
3. } else { 4
4. $.ajax('../../server/preview.php', { 4
5. method: 'POST', 4
6. data: src, 4
7. dataType:'json' 4
8. }).done(function( response ) { 4
9. if (sult) { 50. img = $('<img src ="'+sult+'">'); 51. $pty().append( img ); 52. } else { 53. $("预览出错"); 54. } 55. }); 56. } 57. }, thumbnailWidth, thumbnailHeight ); 58. 59. 6、md5File() 计算⽂件 md5 值，返回⼀个 promise 对象，可以监听 progress 进度。 60. 7、addFiles() 添加⽂件到队列 61. 8、removeFile() 移除某⼀⽂件, 默认只会标记⽂件状态为已取消，如果第⼆个参数为 true 则会从 queue 中移除 62. 9、getFiles() 返回指定状态的⽂件集合，不传参数将返回所有状态的⽂件。 63. 10、retry() 重试上传，重试指定⽂件，或者从出错的⽂件开始重新上传。 64. 11、sort() 排序队列中的⽂件，在上传之前调整可以控制上传顺序。 65. 12、reset() 重置uploader 。⽬前只重置了队列。 66. 13、predictRuntimeType() 预测Uploader 将采⽤哪个Runtime 67.
14、upload() 开始上传。此⽅法可以从初始状态调⽤开始上传流程，也可以从暂停状态调⽤，继续上传流程。可以指定开始某⼀个⽂件 68. 15、stop() 暂停上传。第⼀个参数为是否中断上传当前正在上传的⽂件。如果第⼀个参数是⽂件，则只暂停指定⽂件。 69. 16、cancelFile() 标记⽂件状态为已取
消, 同时将中断⽂件传输。 70. 17、isInProgress() 判断Uplaoder 是否正在上传中。 71. 18、skipFile() 掉过⼀个⽂件上传，直接标记指定⽂件为已上传状态。 72.
19、request() 发送命令。当传⼊callback 或者handler 中返回promise 时。返回⼀个当所有handler 中的promise 都完成后完成的新promise 。 73. 74. 20、ister() 添加组件 75. 21、Uploader.unRegister() 删除插件，只有在注册时指定了名字的才能被删除。
[html]
01.
dndAccept :// 阻⽌，此事件可以拒绝某些类型的⽂件拖⼊进来。⽬前只有 chrome 提供这样的 API ，且只能通过 mime-type 验证。 02. beforeFileQueued :// 当⽂件被加⼊队列之前触发，此事件的handler 返回值为false ，则此⽂件不会被添加进⼊队列。 03. fileQueued :// 当⽂件被加⼊队列以后触发。 04. filesQueued :// 当⼀批⽂件添加进队列以后触发。 05. fileDequeued :// 当⽂件被移除队列后触发。 06. reset :// 当 uploader 被重置的时候触发。 07. startUpload :// 当开始上传流程时触发。 08. stopUpload :// 当开始上传流程暂停时触发。 09. uploadFinished :// 当所有⽂件上传结束时触发。 10. uploadStart :// 某个⽂件开始上传前触发，⼀个⽂件只会触发⼀次。 11.
uploadBeforeSend :// 当某个⽂件的分块在发送前触发，主要⽤来询问是否要添加附带参数，⼤⽂件在开起分⽚上传的前提下此事件可能会触发多次。 12.
uploadAccept :// 当某个⽂件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler 返回值为false, 则此⽂件将派送server 类型的uploadError 事件。 13. uploadProgress :// 上传过程中触发，携带上传进度。 14. uploadError :// 当⽂件上传出错时触发。 15. uploadSuccess :// 当⽂件上传成功时触发。 16. uploadComplete :// 不管成功或者失败，⽂件上传完成时触发。 17.
error :// 当validate 不通过时，会以派送错误事件的形式通知调⽤者。通过('error', handler)可以捕获到此类错误，⽬前有以下错误会在特定的情况下派送错来。 18. //Q_EXCEED_NUM_LIMIT 在设置了fileNumLimit 且尝试给uploader 添加的⽂件数量超出这个值时派送。 19.
//Q_EXCEED_SIZE_LIMIT 在设置了Q_EXCEED_SIZE_LIMIT 且尝试给uploader 添加的⽂件总⼤⼩超出这个值时派送。
20. //Q_TYPE_DENIED 当⽂件类型不满⾜时触发。。
[html]
01. /*Web Uploader 内部类的详细说明，以下提及的功能类，都可以在`WebUploader`这个变量中访问到。 即 Base 类 Mediator 类 File 类都可以在`WebUploader`这个变量中访问到*/
2.3、Mediator 类 事件处理类，可以独⽴使⽤，也可以扩展给对象使⽤ 中介，它本⾝是个单例，但可以通过installTo ⽅法，使任何对象具备事件⾏为。主要⽬的是负责模块与模块之间的合作，降低耦合度2.4、File 类 ⽂件类 本类的⼀般在 UploadProgress 这些事件中的回调函数中变量使⽤⽐较多
2.5、Queue 类 ⽂件队列, ⽤来存储各个状态中的⽂件
github 中的代码给的例⼦基本上可以实现想要的功能，如果有别的需求可以结合代码中的例⼦根据接⼝⼿册进⾏相应的修改。 [html]
01. 1、create() 创建Uploader 实例，等同于new Uploader( opts ); 02. 2、version 当前版本号 03. 3、$ 引⽤依赖的jQuery 或者Zepto 对象 04. 4、browser 简单的浏览器检查结果 05. 5、os android 、ios 06. 6、inherits 实现类与类之间的继承 07. 7、noop ⼀个不做任何事情的⽅法。可以⽤来赋值给默认的callback 08. 8、bindFn 返回⼀个新的⽅法，此⽅法将已指定的context 来执⾏ 09. 9、log 引⽤Console.log 如果存在的话，否则引⽤⼀个空函数noop 。 10. 10、slice 被uncurrythis 的数组slice ⽅法。 将⽤来将⾮数组对象转化成数组对象 11. 11、guid ⽣成唯⼀的ID 12. 12、formatSize 格式化⽂件⼤⼩, 输出成带单位的字符串 13.
13、Deferred 创建⼀个Deferred 对象。 详细的Deferred ⽤法说明，请参照jQuery 的API ⽂档。Deferred 对象在钩⼦回掉函数中经常要⽤到，⽤来处理需要等待的异步操作。 14. 14、isPromise 判断传⼊的参数是否为⼀个 promise 对象。 15. 15、when 返回⼀个promise ，此promise 在所有传⼊的promise 都完成了后完成
[html]
01. on once off trigger installTo
[html]
01. name//⽂件名，包括扩展名（后缀） 02. size//⽂件体积（字节） 03. type//⽂件MIMETYPE 类型，与⽂件类型的对应关系请参考t/z8ZnFny 04. lastModifiedDate//⽂件最后修改⽇期 05. id//⽂件ID ，每个对象具有唯⼀ID ，与⽂件名⽆关 06. ext//⽂件扩展名，通过⽂件名获取，例如test.png 的扩展名为png 07. statusText//状态⽂字说明。在不同的status 语境下有不同的⽤途。 08. setStatus//设置状态，状态变化时会触发change 事件。 09. setStatus( status[, statusText] );//参数:status {File.Status, String}⽂件状态值 10.
statusText //{String} [可选] [默认值: ''] 状态说明，常在error 时使⽤，⽤http, abort,server 等来标记是
由于什么原因导致⽂件错误。 11. File.Status//⽂件状态值，具体包括以下⼏种类型： 12. inited 初始状态 13. queued 已经进⼊队列, 等待上传 14. progress 上传中 15. complete 上传完成。 16. error 上传出错，可重试 17. interrupt 上传中断，可续传。 18. invalid ⽂件不合格，不能重试上传。会⾃动从队列中移除。 19. cancelled ⽂件被移除。
[html]
01. stats//统计⽂件数。 02. numOfQueue 队列中的⽂件数。 03. numOfSuccess 上传成功的⽂件数 04. numOfCancel 被取消的⽂件数 05. numOfProgress 正在上传中的⽂件数 06. numOfUploadFailed 上传错误的⽂件数。 07. numOfInvalid ⽆效的⽂件数。 08. numofDeleted 被移除的⽂件数。 09. append//将新⽂件加⼊对队列尾部 10. prepend//将新⽂件加⼊对队列头部 11. getFile//获取⽂件对象 12. fetch//从队列中取出⼀个指定状态的⽂件。 13. sort//对队列进⾏排序，能够控制⽂件上传顺序。 14. getFiles//获取指定类型的⽂件列表, 列表中每⼀个成员为File 对象。 15. removeFile//在队列中删除⽂件。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论