Light-Year-Example
/
test_webuploader.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>webuploader上传插件 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="js/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="js/magnific-popup/magnific-popup.min.css">
<link href="css/style.min.css" rel="stylesheet">
<style>
  .lyear-uploads-pic {
    display: inherit;
  }
  .lyear-uploads-pic > li.pic-item {
    margin-top: 10px;
  }
  .lyear-uploads-pic li.pic-item .progress {
    position: absolute;
    bottom: 0px;
    margin-bottom: 0px;
    left: 5px;
    right: 5px;
  }
  .lyear-uploads-pic .success,
  .lyear-uploads-pic .error {
    position: absolute;
    top: 0px;
    background-color: rgba(0, 0, 0, .125);
    right: 5px;
    left: 5px;
    color: #fff;
    text-align: center;
  }
  .lyear-uploads-pic figure img {
    width: auto;
    max-width: 100%;
    max-height: 110px;
  }
  .lyear-uploads-pic figure {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
  }
  .webuploader-container label {
    margin-bottom: 0px;
  }
</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><h4>上传插件 webuploader</h4></div>
        <div class="card-body">

          <form action="#" method="post" onsubmit="return false;" id="example-form" class="row">
            <div class="form-group col-md-12">
              <label>单图片上传</label>

              <div class="js-upload-image">
                <input type="hidden" name="one_pic" data-multiple="false" data-size="2048000" data-ext='gif,jpg,jpeg,bmp,png' id="one_pic" value="">
                <div id="picker_one_pic">上传单张图片</div>
                <!--ul用来存放图片预览-->
                <ul id="file_list_one_pic" class="list-inline clearfix lyear-uploads-pic"></ul>
              </div>

            </div>
            <div class="form-group col-md-12">
              <label>多图片上传</label>

              <div class="js-upload-image">
                <input type="hidden" name="more_pic" data-multiple="true" data-size="2048000" data-ext='gif,jpg,jpeg,bmp,png' id="more_pic" value="">
                <div id="picker_more_pic">上传多张图片</div>
                <!--ul用来存放图片预览-->
                <ul id="file_list_more_pic" class="list-inline clearfix lyear-uploads-pic">

                  <!--这里是示例，初始化一个已上传成功的图片，用于编辑时显示。这里假设图片ID为999-->
                  <li class="col-xs-6 col-sm-3 col-md-2 pic-item" id="999">
                    <figure>
                      <img src="./upload/images/lyear_5ddfc00174bbb.jpg" />
                      <figcaption>
                        <a class="btn btn-round btn-square btn-primary btn-link-pic" data-id="999" href="./upload/images/lyear_5ddfc00174bbb.jpg"><i class="mdi mdi-eye"></i></a>
                        <a class="btn btn-round btn-square btn-danger btn-remove-pic" href="#!"><i class="mdi mdi-delete"></i></a>
                      </figcaption>
                    </figure>
                  </li>

                </ul>
              </div>

            </div>
          </form>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(function() {
    /*
     * 示例上传成功采用返回ID的形式，即上传成功以附件表形式存储，返回给前端ID值。
     * 成功返回示例：{"status":200,"info":"成功","class":"success","id":1,"picurl":".\/upload\/images\/lyear_5ddfc00174bbb.jpg"}
     * 这里设定单图上传为js-upload-image，多图上传为js-upload-images
     * 存放预览图的div元素，命名：file_list_*；后面的上传按钮的命名：filePicker_*（这里的*跟隐藏的input的name对应）。方便单页面中存在有多个上传时区分以及使用。
     * input上保存上传后的图片ID以及设置上传时的一些参数，
     */

    // 通用绑定，
    $('.js-upload-image,.js-upload-images').each(function() {
        var $input_file      = $(this).find('input'),
            $input_file_name = $input_file.attr('name'),
            $multiple        = $input_file.data('multiple'),  // 是否选择多个文件
            $ext             = $input_file.data('ext'),       // 支持的文件后缀，示例以图片为例
            $size            = $input_file.data('size');      // 支持最大的文件大小
        var $file_list = $('#file_list_' + $input_file_name);
        var ratio = window.devicePixelRatio || 1;
        var thumbnailWidth = 165 * ratio;
        var thumbnailHeight = 110 * ratio;

        var uploader = WebUploader.create({
            auto: true,
            duplicate: true,
            resize: false,
            swf: './js/webuploader/Uploader.swf',
            server: 'upload.php?type=webuploader',
            pick: {
                id: '#picker_' + $input_file_name,
                multiple: $multiple
            },
            fileSingleSizeLimit: $size,
            accept: {
                title: 'Images',
                extensions: $ext,
                mimeTypes: 'image/*'
            }
        });

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

            var $li = $('<li class="col-xs-6 col-sm-3 col-md-2 pic-item" id="' + file.id + '">' +
                        '  <figure>' +
                        '    <img>' +
                        '    <figcaption>' +
                        '      <a class="btn btn-round btn-square btn-primary btn-link-pic" href="#!"><i class="mdi mdi-eye"></i></a>' +
                        '      <a class="btn btn-round btn-square btn-danger btn-remove-pic" href="#!"><i class="mdi mdi-delete"></i></a>' +
                        '    </figcaption>' +
                        '  </figure>' +
                        '</li>'),
                $img = $li.find('img');

            if ($multiple) {
                $file_list.append($li);
            } else {
                $file_list.html($li);
                $input_file.val('');
            }
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            $('<div class="progress progress-sm"><div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>').appendTo($li);
        });
        uploader.on('uploadProgress', function(file, percentage) {
            var $percent = $('#' + file.id).find('.progress-bar');
            $percent.css('width', percentage * 100 + '%');
        });
        uploader.on('uploadSuccess', function(file, response) {
            var $li = $('#' + file.id);
            if (response.status == 200) { // 返回200成功
                if ($multiple) {
                    if ($input_file.val()) {
                        $input_file.val($input_file.val() + ',' + response.id);
                    } else {
                        $input_file.val(response.id);
                    }
                    $li.find('.btn-remove-pic').attr('data-id', response.id);
                } else {
                    $input_file.val(response.id);
                }
            }
            $('<div class="' + response.class + '"></div>').text(response.info).appendTo($li);
            $li.find('a.btn-link-pic').attr('href', response.picurl);
        });
        uploader.on('uploadError', function(file) {
            var $li = $('#' + file.id);
            $('<div class="error">上传失败</div>').appendTo($li);
        });
        uploader.on('error', function(type) {
            switch (type) {
            case 'Q_TYPE_DENIED':
                alert('图片类型不正确，只允许上传后缀名为：' + $ext + '，请重新上传！');
                //lightyear.notify('图片类型不正确，只允许上传后缀名为：' + $ext + '，请重新上传！', 'danger');
                break;
            case 'F_EXCEED_SIZE':
                alert('图片不得超过' + ($size / 1024) + 'kb，请重新上传！');
                //lightyear.notify('图片不得超过' + ($size / 1024) + 'kb，请重新上传！', 'danger');
                break;
            }
        });
        uploader.on('uploadComplete', function(file) {
            setTimeout(function() {
                $('#' + file.id).find('.progress').remove();
            }, 500);
        });
        // 删除操作
        $file_list.delegate('.btn-remove-pic', 'click', function() {
            if (confirm("你确认要删除该图片吗?")) { // 可改为对话框插件
                if ($multiple) {
                    var id = $(this).data('id'),
                    ids = $input_file.val().split(',');
                    if (id) {
                        for (var i = 0; i < ids.length; i++) {
                            if (ids[i] == id) {
                                ids.splice(i, 1);
                                break;
                            }
                        }
                        $input_file.val(ids.join(','));
                    }
                } else {
                    $input_file.val('');
                }
                $(this).closest('.pic-item').remove();
            }
        });
        // 接入图片查看插件
        $(this).magnificPopup({
            delegate: 'a.btn-link-pic',
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
});
</script>
</body>
</html>