分享百度文件上传组件webUploader的使用demo

<strong>先创建DOM节点：</strong><br data-filtered="filtered"><head ng-app="myApp">
   <meta charset="UTF-8">
   <title></title>
   <script src="jquery-1.10.1.min.js"></script>
   <script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>
   <!--<script src="file_up.js"></script>-->
</head>
<body ng-controller="myCtrl">
　　<p><input type="file" value="上传文件"/></p>
　　</br>
　　<div >
　  　<!--用来存放文件信息-->
     <div ></div>
     <div class="btns">
    <div >选择文件</div>
    <button >开始上传</button>
     </div><br data-filtered="filtered">     <div ></div>
   </div>
</body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<<span style="color:rgb(255 211 0)">scriptspan>>
    //实例化
    var <span style="color:rgb(98 189 255)">uploaderspan> = <span style="color:rgb(98 189 255)">Web<span style="color:rgb(98 189 255)">Uploaderspan>span>.create({
             // <span style="color:rgb(255 111 119)">swfspan>文件路径
        //<span style="color:rgb(255 111 119)">swfspan>: BASE_URL + '/js/<span style="color:rgb(98 189 255)">Uploaderspan>.<span style="color:rgb(255 111 119)">swfspan>',
        // <span style="color:rgb(255 111 119)">swfspan>:'<span style="color:rgb(73 238 255)">httpspan>://<span style="color:rgb(255 111 119)">cdnspan>.<span style="color:rgb(98 189 255)">static<span style="color:rgb(73 238 255)">filespan>span>.org/web<span style="color:rgb(98 189 255)">uploaderspan>/0.1.0/<span style="color:rgb(98 189 255)">Uploaderspan>.<span style="color:rgb(255 111 119)">swfspan>',
        <span style="color:rgb(73 238 255)">autospan>: false,  
        // 文件接收服务端。
        <span style="color:rgb(255 211 0)">serverspan>:'<span style="color:rgb(73 238 255)">httpspan>://<span style="color:rgb(255 111 119)">127span>.0.0.1:8020/upFile/<span style="color:rgb(253 97 106)"><span style="color:rgb(73 238 255)">filespan>_upspan>.html',   <span>//在做这个demo的时候，并没有服务器地址，我使用的是HBuilder自带的浏览器打开文件，复制urlspan>
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是<span style="color:rgb(255 95 0)">flashspan>.
        <span style="color:rgb(73 238 255)">pickspan>: '#<span style="color:rgb(73 238 255)">pickspan>er',    
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        <span style="color:rgb(255 211 0)">resizespan>: false,     
            <span style="color:rgb(255 211 0)">methodspan>:'POST',  
    });
      
// 上传队列，仅包括等待上传的文件
     var <span style="color:rgb(255 211 0)">_queuespan> = [];
 
// 存储所有文件
     var _map = {};<br>
// 当有文件被添加进队列的时候
    <span style="color:rgb(98 189 255)">uploaderspan>.on( '<span style="color:rgb(73 238 255)">filespan>Queued', function( <span style="color:rgb(73 238 255)">filespan> ) {       
    var that_<span style="color:rgb(73 238 255)">filespan>=<span style="color:rgb(73 238 255)">filespan>;
    <span style="color:rgb(255 211 0)">_queuespan>.push(<span style="color:rgb(73 238 255)">filespan>);
    draw_page(<span style="color:rgb(255 211 0)">_queuespan>);     
    });
          
   //绘制页面
    function draw_page(<span style="color:rgb(255 211 0)">_queuespan>){
        $<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>=$("#my_<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>");
        $<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.html("");
        <span style="color:rgb(253 97 106)">consolespan>.log($<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.html());
        for(var i=0;i<<span style="color:rgb(255 211 0)">_queuespan>.length;i++){
              $<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.append( '<<span style="color:rgb(255 111 119)">divspan> >' +
            '<<span style="color:rgb(144 255 173)">h4span> class="<span style="color:rgb(73 238 255)">infospan>">' + <span style="color:rgb(255 211 0)">_queuespan>[i].name + 
              '<span ' + 'onc<span style="color:rgb(144 255 173)">lispan>ck=deleteMy<span style="color:rgb(73 238 255)">filespan>('+<span style="color:rgb(255 211 0)">_queuespan>[i].<span style="color:rgb(144 255 173)">idspan>+')'+ '> 取消上传</span>'
            +'</<span style="color:rgb(144 255 173)">h4span>>' +
            '</<span style="color:rgb(255 111 119)">divspan>>' );    
        }   
    }
     
    //点击开始上传文件
        $("#ctlBtn").on("c<span style="color:rgb(144 255 173)">lispan>ck",function(){
       <span style="color:rgb(98 189 255)">uploaderspan>.upload();     
    });
                 
    //点击“取消”按钮，调用事件
    function deleteMy<span style="color:rgb(73 238 255)">filespan>(myFile_<span style="color:rgb(144 255 173)">idspan>){
           <span style="color:rgb(253 97 106)">consolespan>.log(myFile_<span style="color:rgb(144 255 173)">idspan>);
          //点击取消，删除dom节点刷新界面
         //   $(myFile_<span style="color:rgb(144 255 173)">idspan>).remove();
            
           var tar_<span style="color:rgb(144 255 173)">idspan>= $(myFile_<span style="color:rgb(144 255 173)">idspan>).attr("<span style="color:rgb(144 255 173)">idspan>");
           $.each(<span style="color:rgb(255 211 0)">_queuespan>,function(k,v){
                if(<span style="color:rgb(255 211 0)">_queuespan>[k].<span style="color:rgb(144 255 173)">idspan>==tar_<span style="color:rgb(144 255 173)">idspan>){
                    var myFile=<span style="color:rgb(255 211 0)">_queuespan>[k];
                    <span style="color:rgb(98 189 255)">uploaderspan>.removeFile(myFile,true);     
                }   
                //return false;
           });       
    }
    //文件删除的详细方式
    function _delFile (<span style="color:rgb(73 238 255)">filespan>){
        for(var i = <span style="color:rgb(255 211 0)">_queuespan>.length - 1 ; i >= 0 ; i-- ){
            if(<span style="color:rgb(255 211 0)">_queuespan>[i].<span style="color:rgb(144 255 173)">idspan>== <span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan>){
                 <span style="color:rgb(255 211 0)">_queuespan>.sp<span style="color:rgb(144 255 173)">lispan>ce(i,1); 
                break;
            }
        }
       //重新绘制界面
        draw_page(<span style="color:rgb(255 211 0)">_queuespan>);         
    };
     
    //档文件被移除队列de时候
    <span style="color:rgb(98 189 255)">uploaderspan>.on("<span style="color:rgb(73 238 255)">filespan>Dequeued",function(<span style="color:rgb(73 238 255)">filespan>){
        _delFile (<span style="color:rgb(73 238 255)">filespan>);
    });
     
    // 文件上传过程中创建进度条实时显示。
    <span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadProgress', function( <span style="color:rgb(73 238 255)">filespan>, <span style="color:rgb(253 97 106)">percentspan>age ) {
        alert("uploadProgress--文件正在上传");
        var $<span style="color:rgb(144 255 173)">lispan> = $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ),
            $<span style="color:rgb(253 97 106)">percentspan> = $<span style="color:rgb(144 255 173)">lispan>.find('.progress .<span style="color:rgb(98 189 255)">progress-barspan>');
             
        // 避免重复创建
        if ( !$<span style="color:rgb(253 97 106)">percentspan>.length ) {
            $<span style="color:rgb(253 97 106)">percentspan> = $('<<span style="color:rgb(255 111 119)">divspan> class="progress progress-striped active">' +
              '<<span style="color:rgb(255 111 119)">divspan> class="<span style="color:rgb(98 189 255)">progress-barspan>" role="<span style="color:rgb(98 189 255)">progressbarspan>" style="<span style="color:rgb(255 95 0)">w<span style="color:rgb(144 255 173)">idspan>thspan>: 0%">' +
              '</<span style="color:rgb(255 111 119)">divspan>>' +
            '</<span style="color:rgb(255 111 119)">divspan>>').appendTo( $<span style="color:rgb(144 255 173)">lispan> ).find('.<span style="color:rgb(98 189 255)">progress-barspan>');
        }
     
        $<span style="color:rgb(144 255 173)">lispan>.find('p.state').text('上传中'); 
        $<span style="color:rgb(253 97 106)">percentspan>.css( '<span style="color:rgb(255 95 0)">w<span style="color:rgb(144 255 173)">idspan>thspan>', <span style="color:rgb(253 97 106)">percentspan>age * 100 + '%' );
    });
     
    //开始上传
    <span style="color:rgb(98 189 255)">uploaderspan>.on('startUpload',function(<span style="color:rgb(73 238 255)">filespan>){
          alert("文件开始上传了------startUpload");    
    });
     
    <span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadSuccess', function( <span style="color:rgb(73 238 255)">filespan> ) {
        $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('p.state').text('已上传');
    });
 
    <span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadError', function( <span style="color:rgb(73 238 255)">filespan> ) {
        $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('p.state').text('上传出错');
    });
 
    <span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadComplete', function( <span style="color:rgb(73 238 255)">filespan> ) {
        $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('.progress').fadeOut();
    });
</<span style="color:rgb(255 211 0)">scriptspan>><br><br>

参考文章：http://blog.ncmem.com/wordpress/2023/09/14/%e5%88%86%e4%ba%ab%e7%99%be%e5%ba%a6%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%bb%84%e4%bb%b6webuploader%e7%9a%84%e4%bd%bf%e7%94%a8demo/

欢迎入群一起讨论