WebUploader文件图片上传插件带进度条上传图片



226 902 301



特效描述:WebUploader 文件图片上传 带进度条 上传图片,功能强大的文件上传插件带上传进度-WebUploader

代码结构

1. 引入CSS

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script src="/js/ad_js/bd_76090.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/webuploader.min.js"></script>
<script type="text/javascript" src="js/upload.js"></script>

3. HTML代码

<div class="container">
	<div class="row main">
        <div class="demo">
            <h3>1、文件上传</h3>
            <div id="uploadfile">
                <!--用来存放文件信息-->
                <div id="thelist" class="uploader-list"></div>
                <div class="form-group form-inline">
                    <div id="picker" style="float:left">选择文件</div> &nbsp;
                    <button id="ctlBtn" class="btn btn-default" style="padding:8px 15px;">开始上传</button>
                </div>
            </div>
        </div>
        <div class="demo">
            <h3>2、图片上传</h3>
            <div id="uploadimg">
                <div id="fileList" class="uploader-list"></div>
                <div id="imgPicker">选择图片</div>
            </div>
        </div>
        <!--<div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>-->
        <div class="demo">
            <h3>3、高级上传</h3>
            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里,单次最多可选10张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	var $list = $('#thelist'),
        $btn = $('#ctlBtn');
    var uploader = WebUploader.create({
      resize: false, // 不压缩image     
      swf: 'js/uploader.swf', // swf文件路径
      server: 'upload.php', // 文件接收服务端。
      pick: '#picker', // 选择文件的按钮。可选
      chunked: true, //是否要分片处理大文件上传
      chunkSize:2*1024*1024 //分片上传,每片2M,默认是5M
      //auto: false //选择文件后是否自动上传
     // chunkRetry : 2, //如果某个分片由于网络问题出错,允许自动重传次数
      //runtimeOrder: 'html5,flash',
      // accept: {
      //   title: 'Images',
      //   extensions: 'gif,jpg,jpeg,bmp,png',
      //   mimeTypes: 'image/*'
      // }
    });
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
        '</div>' );
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
            '</div>').appendTo( $li ).find('.progress-bar');
        }
        $li.find('p.state').text('上传中');
        $percent.css( 'width', percentage * 100 + '%' );
    });
    // 文件上传成功
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('p.state').text('已上传');
    });
    // 文件上传失败,显示上传出错
    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });
    // 完成上传完
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });
    $btn.on('click', function () {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            uploader.upload();
            // if (state === 'ready') {
            //     uploader.upload();
            // } else if (state === 'paused') {
            //     uploader.upload();
            // } else if (state === 'uploading') {
            //     uploader.stop();
            // }
        });
});
//上传图片
 // 初始化Web Uploader
var uploader = WebUploader.create({
    // 选完文件后,是否自动上传。
    auto: true,
    // swf文件路径
    swf: 'js/Uploader.swf',
    // 文件接收服务端。
    server: 'upload.php',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: '#imgPicker',
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    var $list = $("#fileList"),
        $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');
    // $list为容器jQuery实例
    $list.append( $li );
    // 创建缩略图
    // 如果为非图片文件,可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
        $img.attr( 'src', src );
    }, 100, 100 );
});
// 文件上传过程中创建进度条实时显示。
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();
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 图片拖动 图片头像上传 二维码 文字拖动 文件上传 地图 拖动排序 文本框 计算器 下拉框 计时器 弹出层拖动 复选 桌面 单选 跳转 登录框 步骤 注册框 键盘 搜索框 签到 验证码 分享 二级联动 点赞 投票 三级联动 雪花 城市选择 打印 value赋值 筛选 答题 按钮控制 购物车 震动 颜色选择 表单提交 全选/反选 图表 添加删除 鼠标滑过 添加标签 抽奖 密码强度验证 表情 表单验证 qq空间 头像截图 html5按钮动画 星星打分评分 按钮样式 密码修改设置 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 拖动拽动 滑动星星打分 切换按钮 form表单 其他更多

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到