webuploader的简单使用

需要的文件   自备  百度很多

webuploader.js  uploader.swf  jQuery


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  7. <script type="text/javascript" src="webuploader.js"></script>
  8. <style type="text/css">
  9. .webuploader-container {
  10. position: relative;
  11. }
  12. .webuploader-element-invisible {
  13. position: absolute !important;
  14. clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  15. clip: rect(1px,1px,1px,1px);
  16. }
  17. .webuploader-pick {
  18. position: relative;
  19. display: inline-block;
  20. cursor: pointer;
  21. background: #00b7ee;
  22. padding: 10px 15px;
  23. color: #fff;
  24. text-align: center;
  25. border-radius: 3px;
  26. overflow: hidden;
  27. }
  28. .webuploader-pick-hover {
  29. background: #00a2d4;
  30. }
  31. .webuploader-pick-disable {
  32. opacity: 0.6;
  33. pointer-events:none;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="uploader" class="wu-example">
  39. <!--用来存放文件信息-->
  40. <div id="thelist" class="uploader-list"></div>
  41. <div class="btns">
  42. <div id="picker">选择文件</div>
  43. <button id="ctlBtn" class="btn btn-default">开始上传</button>
  44. </div>
  45. </div>
  46. <div id="fileList"></div>
  47. <div id="ss"></div>
  48. </body>
  49. </html>

  1. $(function() {
  2. var uploader;
  3. uploader = WebUploader.create({
  4. resize: false, // 不压缩image
  5. swf: 'uploader.swf',// swf文件路径
  6. server: 'upload.php', // 文件接收服务端。
  7. pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建,可能是input元素,也可能是flash.
  8. chunked: true,//允许分片上传
  9. chunkSize:2*1024*1024,//每个分片大小
  10. auto: true,//是否自动上传
  11. duplicate:true,//去除重复
  12. fileNumLimit:20,//上传文件个数限制
  13. fileSingleSizeLimit:20*1024*1024, //单个文件大小限制 20M
  14. accept: {
  15. title: '文字描述',//文字描述
  16. extensions: 'png,3gp,mp4,rmvb,mov,avi,m4v,wmv',//上传文件后缀
  17. mimeTypes: 'image/*,video/*,audio/*,application/*'//上传文件类型
  18. }
  19. });
  20. uploader.on('uploadStart', function (file) {
  21. alert("这是文件上传前的操作函数");
  22. });
  23. $("#ctlBtn").click(function () {
  24. alert("要使用手动上传请设置参数");
  25. // uploader.upload();//这是将参数配置auto设置 false 手动上传
  26. });
  27. uploader.on( 'fileQueued', function( file ) { //文件加入队列后触发
  28. var $list = $("#fileList"),
  29. $li = $(
  30. '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>'+ '<div class="info">' + file.name + '</div>' + '</div>'
  31. ),
  32. $img = $li.find('img');
  33. // $list为容器jQuery实例
  34. $list.append( $li );
  35. // 创建缩略图
  36. uploader.makeThumb( file, function( error, src ) { //src base_64位
  37. if ( error ) {
  38. $img.replaceWith('<span>不能预览</span>');
  39. return;
  40. }
  41. $img.attr( 'src', src );
  42. }, 100, 100 ); //100x100为缩略图尺寸
  43. });
  44. // 文件上传过程中创建进度实时显示。
  45. uploader.on( 'uploadProgress', function( file, percentage ) {
  46. var ss=(percentage*100)+"%";
  47. $("#ss").text(ss);
  48. });
  49. // 文件上传成功
  50. uploader.on( 'uploadSuccess', function( file, res ) {
  51. alert("这是文件上传成功的操作函数");
  52. console.log(res.filePaht);//这里可以得到上传后的文件路径
  53. });
  54. });

大文件webuploader的基本使用的更多相关文章

  1. 用百度webuploader分片上传大文件

    一般在做文件上传的时候,都是通过客户端把要上传的文件上传到服务器,此时上传的文件都在服务器内存,如果上传的是视频等大文件,那么服务器内存就很紧张,而且一般我们都是用flash或者html5做异步上传, ...

  2. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

  3. 使用Webuploader大文件分片传输

    背景:50G大文件的HTTP上传至服务器. 好了,根据这个命题,可以开始研究我们怎么做才能把这么大的文件上传成功. 分片上传是肯定的,断点续传也是要有的,进度可视化那就更好了,基于这些,我选择了Web ...

  4. 【原创】MVC +WebUploader 实现分片上传大文件

    大文件的上传是我一直以来想学习的一个技术点,今天在项目闲暇之时,终于有机会自己尝试了一把,本文仅仅是个Demo,各种错误处理都么有,仅限于大家来学习思路. 参考博文:http://www.cnblog ...

  5. Asp.net MVC利用WebUploader上传大文件出现404解决办法。

    刚开始我上传小文件都是比较顺利的,但是上传了一个大文件大约有200M的压缩包就不行了.在chrome里面监视发现网络状态是404,我分析可能不是WebUploader的限制,应该是WebConfig限 ...

  6. Bottle + WebUploader 修改Bottle框架从而大文件上传实现方案

    Bottle 是个轻量级的Web框架,小巧又强大,真不愧是个轻量级的框架.可扩展性非常好,可以扩展很多功能,但是有些功能就不得不自己动手修改了. Bottle:http://www.bottlepy. ...

  7. 百度Webuploader 大文件分片上传(.net接收)

    前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片上传的帖子,参考之后,踏出了第一步.此文记录我这次实践的点滴,仅 ...

  8. webUploader实现大文件分片,断点续传

    问题: 公司现在的业务需求是要上传一个大文件,上一次写了一篇博客,做了一个简单的文件上传,支持单文件,大型文件上传 现在对之前的上传进行优化,支持断点续传,秒传功能 上次博客:[http://www. ...

  9. 百度Fex webuploader.js上传大文件失败

    项目上用百度webuploader.js上传文件,option选项里面已经设置单个文件大小,但是上传低于此阈值的文件时仍然不成功. 我现在的理解是,框架是将文件post到后台服务器端的.. 百度发现是 ...

随机推荐

  1. 学习笔记-db

    异步,最终一致性,幂等操作 关系型数据库隔离了数据的存储路径,让用户只关心查询的逻辑,为了实现事物和强一致性通过各种锁牺牲了性能 互联网在线处理需求排列 数据的扩展性 > 请求的响应时间 > ...

  2. Win10 pip install gensim 报错处理

    # 故障描述 shell > pip install gensim # 报错信息如下: Command "c:\users\op\appdata\local\programs\pyth ...

  3. scrollTop实现图像循环滚动(实例1)

    <html><head><title>scrollTop实现图像循环滚动(实例1)</title><meta http-equiv="C ...

  4. C#累加器函数Aggregate用法 讲解

    Enumerable.Aggregate 扩展方法在System.Linq命名空间中,是Enumerable类的第一个方法(按字母顺序排名),但确是Enumerable里面相对复杂的方法. MSDN对 ...

  5. C#整合VS2010和NUnit

    软件下载 .Net单元测试工具 NUnit下载:http://www.nunit.org/index.php?p=download,最新的为NUnit-2.6.0.12051.msi,下载安装. VS ...

  6. js中怎么写自执行函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. FP-growth算法高效发现频繁项集(Python代码)

    FP-growth算法高效发现频繁项集(Python代码) http://blog.csdn.net/leo_xu06/article/details/51332428

  8. rook 记录

    更改rook 集群的配置 https://github.com/rook/rook/blob/master/design/cluster-update.md rook集群升级流程 https://ro ...

  9. Mysql 中json 相关函数的使用

    1.JSON_LENGTH: select content from test1 ["1","2","3","4",&q ...

  10. cmd命令 从C盘转到D盘

        点开始 点运行.输入 CMD 回车.进入DOS提示符状态下.输入 cd\ 回车 表示进入 c:\> 也就是C盘根目录下.输入d: 回车 是进入D盘当前目录,并不一定是根目录.然后cd\ ...