webuploader的简单使用

需要的文件   自备  百度很多

webuploader.js  uploader.swf  jQuery



  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html lang="en">
    

    3. 

  3. 

    

    

    

    <head>
    

    4. 

  4. 

    

    

    

        <meta charset="UTF-8">
    

    5. 

  5. 

    

    

    

        <title>Document</title>
    

    6. 

  6. 

    

    

    

        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    

    7. 

  7. 

    

    

    

        <script type="text/javascript" src="webuploader.js"></script>
    

    8. 

  8. 

    

    

    

        <style type="text/css">
    

    9. 

  9. 

    

    

    

          .webuploader-container {
    

    10. 

  10. 

    

    

    

                position: relative;
    

    11. 

  11. 

    

    

    

            }
    

    12. 

  12. 

    

    

    

            .webuploader-element-invisible {
    

    13. 

  13. 

    

    

    

                position: absolute !important;
    

    14. 

  14. 

    

    

    

                clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    

    15. 

  15. 

    

    

    

                clip: rect(1px,1px,1px,1px);
    

    16. 

  16. 

    

    

    

            }
    

    17. 

  17. 

    

    

    

            .webuploader-pick {
    

    18. 

  18. 

    

    

    

                position: relative;
    

    19. 

  19. 

    

    

    

                display: inline-block;
    

    20. 

  20. 

    

    

    

                cursor: pointer;
    

    21. 

  21. 

    

    

    

                background: #00b7ee;
    

    22. 

  22. 

    

    

    

                padding: 10px 15px;
    

    23. 

  23. 

    

    

    

                color: #fff;
    

    24. 

  24. 

    

    

    

                text-align: center;
    

    25. 

  25. 

    

    

    

                border-radius: 3px;
    

    26. 

  26. 

    

    

    

                overflow: hidden;
    

    27. 

  27. 

    

    

    

            }
    

    28. 

  28. 

    

    

    

            .webuploader-pick-hover {
    

    29. 

  29. 

    

    

    

                background: #00a2d4;
    

    30. 

  30. 

    

    

    

            }
    

    31. 

  31. 

    

    

    

     
    

    32. 

  32. 

    

    

    

            .webuploader-pick-disable {
    

    33. 

  33. 

    

    

    

                opacity: 0.6;
    

    34. 

  34. 

    

    

    

                pointer-events:none;
    

    35. 

  35. 

    

    

    

            }
    

    36. 

  36. 

    

    

    

        </style>
    

    37. 

  37. 

    

    

    

    </head>
    

    38. 

  38. 

    

    

    

    <body>
    

    39. 

  39. 

    

    

    

        <div id="uploader" class="wu-example">
    

    40. 

  40. 

    

    

    

             <!--用来存放文件信息-->
    

    41. 

  41. 

    

    

    

             <div id="thelist" class="uploader-list"></div>
    

    42. 

  42. 

    

    

    

             <div class="btns">
    

    43. 

  43. 

    

    

    

                <div id="picker">选择文件</div>
    

    44. 

  44. 

    

    

    

                <button id="ctlBtn" class="btn btn-default">开始上传</button>
    

    45. 

  45. 

    

    

    

             </div>
    

    46. 

  46. 

    

    

    

         </div>
    

    47. 

  47. 

    

    

    

         <div id="fileList"></div>
    

    48. 

  48. 

    

    

    

         <div id="ss"></div>
    

    49. 

  49. 

    

    

    

    </body>
    

    50. 

  50. 

    

    

    

    </html>
    






  1. 

    

    

    

        $(function() {
    

    2. 

  2. 

    

    

    

            var  uploader;
    

    3. 

  3. 

    

    

    

            uploader = WebUploader.create({
    

    4. 

  4. 

    

    

    

                   resize: false, // 不压缩image     
    

    5. 

  5. 

    

    

    

                   swf: 'uploader.swf',// swf文件路径    
    

    6. 

  6. 

    

    

    

                   server: 'upload.php', // 文件接收服务端。 
    

    7. 

  7. 

    

    

    

                   pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.
    

    8. 

  8. 

    

    

    

                   chunked: true,//允许分片上传
    

    9. 

  9. 

    

    

    

                   chunkSize:2*1024*1024,//每个分片大小
    

    10. 

  10. 

    

    

    

                   auto: true,//是否自动上传
    

    11. 

  11. 

    

    

    

                   duplicate:true,//去除重复
    

    12. 

  12. 

    

    

    

                   fileNumLimit:20,//上传文件个数限制  
    

    13. 

  13. 

    

    

    

                   fileSingleSizeLimit:20*1024*1024, //单个文件大小限制  20M
    

    14. 

  14. 

    

    

    

                   accept: {
    

    15. 

  15. 

    

    

    

                    title: '文字描述',//文字描述
    

    16. 

  16. 

    

    

    

                    extensions: 'png,3gp,mp4,rmvb,mov,avi,m4v,wmv',//上传文件后缀
    

    17. 

  17. 

    

    

    

                    mimeTypes: 'image/*,video/*,audio/*,application/*'//上传文件类型
    

    18. 

  18. 

    

    

    

                   }
    

    19. 

  19. 

    

    

    

            });
    

    20. 

  20. 

    

    

    

            uploader.on('uploadStart', function (file) {
    

    21. 

  21. 

    

    

    

                  alert("这是文件上传前的操作函数");
    

    22. 

  22. 

    

    

    

            });
    

    23. 

  23. 

    

    

    

            $("#ctlBtn").click(function () {
    

    24. 

  24. 

    

    

    

                alert("要使用手动上传请设置参数");
    

    25. 

  25. 

    

    

    

              //  uploader.upload();//这是将参数配置auto设置 false 手动上传
    

    26. 

  26. 

    

    

    

            });
    

    27. 

  27. 

    

    

    

            uploader.on( 'fileQueued', function( file ) { //文件加入队列后触发
    

    28. 

  28. 

    

    

    

                 var $list = $("#fileList"),
    

    29. 

  29. 

    

    

    

                 $li = $(
    

    30. 

  30. 

    

    

    

                 '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>'+ '<div class="info">' + file.name + '</div>' + '</div>'
    

    31. 

  31. 

    

    

    

                 ),
    

    32. 

  32. 

    

    

    

                 $img = $li.find('img');         
    

    33. 

  33. 

    

    

    

                 // $list为容器jQuery实例
    

    34. 

  34. 

    

    

    

                 $list.append( $li );  
    

    35. 

  35. 

    

    

    

                 // 创建缩略图
    

    36. 

  36. 

    

    

    

                 uploader.makeThumb( file, function( error, src ) { //src base_64位
    

    37. 

  37. 

    

    

    

                     if ( error ) {
    

    38. 

  38. 

    

    

    

                         $img.replaceWith('<span>不能预览</span>');
    

    39. 

  39. 

    

    

    

                         return;
    

    40. 

  40. 

    

    

    

                     }
    

    41. 

  41. 

    

    

    

                   
    

    42. 

  42. 

    

    

    

                     $img.attr( 'src', src );
    

    43. 

  43. 

    

    

    

                 }, 100, 100 ); //100x100为缩略图尺寸
    

    44. 

  44. 

    

    

    

            });
    

    45. 

  45. 

    

    

    

            // 文件上传过程中创建进度实时显示。
    

    46. 

  46. 

    

    

    

            uploader.on( 'uploadProgress', function( file, percentage ) {
    

    47. 

  47. 

    

    

    

                var ss=(percentage*100)+"%";
    

    48. 

  48. 

    

    

    

                $("#ss").text(ss);
    

    49. 

  49. 

    

    

    

            });
    

    50. 

  50. 

    

    

    

               
    

    51. 

  51. 

    

    

    

            // 文件上传成功
    

    52. 

  52. 

    

    

    

            uploader.on( 'uploadSuccess', function( file, res ) {
    

    53. 

  53. 

    

    

    

                 alert("这是文件上传成功的操作函数");
    

    54. 

  54. 

    

    

    

                 console.log(res.filePaht);//这里可以得到上传后的文件路径
    

    55. 

  55. 

    

    

    

            });
    

    56. 

  56. 

    

    

    

     
    

    57. 

  57. 

    

    

    

        });

大文件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. WP8.1 在默认浏览器中打开url

    Windows.System.Launcher.LaunchUriAsync(new Uri("http://www.google.com")); PS: This is for ...

  2. Asp.net MVC重要

    1.asp.net mvc百度解释 2.asp.net mvc各版本特点 3.asp.net mvc知多少 4.asp.net mvc4入门到精通系列目录汇总(邹琼俊)[重要] 5.新年奉献MVC+E ...

  3. Apache kafka v1.0.0 部署文档

    简介: Apache Kafka 是一个 Scala 语言编写的可扩展.分布式.高性能的容错消息发布.订阅系统. 官网地址:http://kafka.apache.org 中文教程:http://ww ...

  4. 设计模式学习笔记（1）Iterator

    Iterator 模式 public interface Iterator { public boolean hasNext(); public Object next(); } public int ...

  5. js 删除节点，jquery遍历通过内容定位节点

    $(".class1 .class2").each(function (index, item) { var gettedValue = $(item).find(".c ...

  6. 等待时间，time.sleep()和implicitly_wait()

    在运行一个以前执行的过的功能时,报错了,不能执行了. 功能描述:通过导航,选择下拉项(发布职位功能),下面是审查的元素: 获取元素的代码: 尝试了用xpath去获取:driver.find_eleme ...

  7. in文件注意事项及详细解释

    lammps做分子动力学模拟时,需要一个输入文件(input script),也就是in文件,以及关于体系的原子坐标之类的信息文件(data file)和势文件(potential file).lam ...

  8. Codeforces Beta Round #14 (Div. 2)

    Codeforces Beta Round #14 (Div. 2) http://codeforces.com/contest/14 A 找最大最小的行列值即可 #include<bits/s ...

  9. AasyncTask中执行execute（）还是executeOnExecutor（）

    executeOnExecutor()api 11 才出现的 并行的 效率比execute()高因为execute()是串行的 import android.app.Activity; import ...

  10. jdk8 jvm配置参数说明

    这些选项是特定于Java HotSpot虚拟机的通用选项.-X 显示所有可用-X选项的帮助. -Xbatch 禁用后台编译.默认情况下,JVM将该方法编译为后台任务,以解释器模式运行该方法,直到后台编 ...