web uploader的demo怎样导入css文件？

Posted 2023-04-29

<!--引入CSS--><link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">

Web Uploader文件上传

首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。



初始化Web Uploader。



显示用户选择框。



文件上传进度显示。



文件成功、失败处理。

参考技术A

web uploader的demo导入css文件的方法如下：

<!--引入CSS-->

<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以html5为主，FLASH为辅的现代文件上传组件。一下是其功能介绍：

分片、并发：

分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。

预览、压缩：

支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。

多途径添加文件

支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。

HTML5 & FLASH

兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核

MD5秒传

当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。

易扩展、可拆分

采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。

引入资源

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

参考资料

Web Uploader文件上传插件使用详解.脚本之家[引用时间2017-12-31]

上传图片插件web upload

 

官网地址：http://fex.baidu.com/webuploader/getting-started.html

 

html：

<!--dom结构部分-->
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>

 

css3

.webuploader-container {
    position: relative;
}
.webuploader-element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #00b7ee;
    padding: 10px 15px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}
.webuploader-pick-hover {
    background: #00a2d4;
}

.webuploader-pick-disable {
    opacity: 0.6;
    pointer-events:none;
}

 

JavaScript

//id -> 存放图片  width，height  存放图片尺寸宽高  id2 按钮  allMaxSize图片大小
function picUpload(id,width,height,id2,allMaxSize){

    var $ = jQuery,
        $list = $(id),
    // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,

    // 缩略图大小
        thumbnailWidth = width * ratio,
        thumbnailHeight = height * ratio,

    //allMaxSize = 1,//限制图片大小

    // Web Uploader实例
        uploader;

    // 初始化Web Uploader
    uploader = WebUploader.create({

        // 自动上传。
        auto: true,

        // swf文件路径
        swf: ‘E:/work/seller/public/img/common‘,

        // 文件接收服务端。
        server: ‘http://webuploader.duapp.com/server/fileupload.php‘,

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

        duplicate :true,//是否可以重复上传

        fileSizeLimit: allMaxSize*1024*1024, //限制图片大小，不可以超过

        compress: null,

        // 只允许选择文件，可选。
        accept: {
            title: ‘Images‘,
            extensions: ‘gif,jpg,jpeg,bmp,png‘,
            mimeTypes: ‘image/jpg,image/jpeg,image/png‘   //修改这行，加快上传文件框的打开速度
        }
    });

    // 当有文件添加进来的时候
    uploader.on( ‘fileQueued‘, function( file ) {
        $list.empty(); //清空之前上传的文件

        var $li = $(
                ‘<div id="‘ + file.id + ‘" class="file-item thumbnail">‘ +
                ‘<img>‘ +
                ‘<div class="info">‘ + file.name + ‘</div>‘ +
                ‘</div>‘
            ),
            $img = $li.find(‘img‘);

        $list.append( $li );

        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith(‘<span>不能预览</span>‘);
                return;
            }

            //去掉默认的头像，清空图片名字的信息
            $(‘.webuploader-pick img‘).attr(‘src‘,‘‘)
            $(‘.file-item .info‘).empty();

            $img.attr( ‘src‘, src );
        }, thumbnailWidth, thumbnailHeight );

    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( ‘uploadProgress‘, function( file, percentage ) {
        var $li = $( ‘#‘+file.id ),
            $percent = $li.find(‘.progress span‘);

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $(‘<p class="progress"><span></span></p>‘)
                .appendTo( $li )
                .find(‘span‘);
        }

        $percent.css( ‘width‘, percentage * 100 + ‘%‘ );
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( ‘uploadSuccess‘, function( file ) {
        $( ‘#‘+file.id ).addClass(‘upload-state-done‘);
    });

    // 文件上传失败，现实上传出错。
    uploader.on( ‘uploadError‘, function( file ) {
        var $li = $( ‘#‘+file.id ),
            $error = $li.find(‘div.error‘);

        // 避免重复创建
        if ( !$error.length ) {
            $error = $(‘<div class="error"></div>‘).appendTo( $li );
        }

        //$error.text(‘上传失败‘);

    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( ‘uploadComplete‘, function( file ) {
        $( ‘#‘+file.id ).find(‘.progress‘).remove();
    });

    //  验证大小
    uploader.on("error",function (type){

         if(type == "Q_EXCEED_SIZE_LIMIT"){
            window.alert("系统提示:所选图片总大小不可超过" + allMaxSize + "M哦！换个小点的文件吧！");
        }

        // 判断传入的是不是函数
        /*  if( jQuery.isFunction(sideFun) ){
         sideFun(type,allMaxSize);
         }else {
         //不是函数
         console.log(2)
         return false;
         }*/
        /*  if(sideFun === ‘undefined‘){
         return true;
         }else{
         sideFun(type,allMaxSize);
         }
         */
    });


}


//调用
picUpload(‘#fileList‘,100,100,‘#filePicker‘,10000);