↑
↓

webuploader.min.js 简单例子

一个百度开发的开源框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/webuploader.min.js"></script>
<script>
    $(function() {
        var uploader = WebUploader.create({
            auto : true, // 选完文件后，是否自动上传 
            swf : 'js/Uploader.swf', // swf文件路径 
            server : 'upload.php', // 文件接收服务端 
            pick : '#imgPicker', // 选择文件的按钮。可选 
            // 只允许选择图片文件。 
            accept : {
                title : 'Images',//文字描述
                extensions : 'gif,jpg,jpeg,bmp,png',//允许的文件后缀，不带点，多个用逗号分割。
                mimeTypes : 'image/*'
            }
        /*
         ,
         thumb:{
         width:600,
         height:400
         }
         */
        });

        uploader
                .on(
                        'fileQueued',
                        function(file) {
                            var $list = $("#fileList");
                            var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
                                    + '<img>'
                                    + '<div class="info">'
                                    + file.name + '</div>' + '</div>');

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

                            // $list为容器jQuery实例 
                            $list.append($li);

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

                                $img.attr('src', src);//给img标签赋值src路径
                            }, 100, 100); //100x100为缩略图尺寸 
                        });

        //文件上传过程中创建进度条实时显示。 
        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, res) {
            console.log(res.filePath);//这里可以得到上传后的文件路径 
            $('#' + 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.option( 'compress', {
         width: 1600,
         height: 1600
         });*/
    });
</script>
</head>

<body>

    <div id="uploadimg">
        <div id="fileList" class="uploader-list"></div>
        <div id="imgPicker">选择图片</div>
    </div>

</body>
</html>

 

posted @ 2019-02-27 10:40  爱跳舞的程序员  阅读(905)  评论(0)  编辑  收藏  举报