plupload

是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。https://github.com/moxiecode/plupload

示例 (单图上传-可剪裁和纯预览)

引用

<link rel="stylesheet" href="/node/assets/vendor/cropper/cropper.min.css">

<script src="/node/assets/vendor/plupload/plupload.full.min.js"></script>
<script src="/node/assets/vendor/cropper/cropper.min.js"></script>
<script src="/node/assets/scripts/preview.js"></script>

HTML

<!-- 头像上传 注意J_avatar selectfiles的位置和用法 -->
<div class="baie-cells">
        <a class="baie-cell baie-cell_access" href="javascript:;">
            <div class="baie-cell__bd">头像</div>
            <div class="baie-cell__ft">
                <div class="baie-avatar">
                    <img src="/node/assets/images/avatar_default.png" alt="" class="J_avatar">
                    <input type="hidden" name="avatar">
                </div>
            </div>
            <div style="position: absolute;top: 0; left: 0; width: 100%; height: 100%" id="selectfiles"></div>
        </a>
        ...
</div>

<!-- 进度条 -->
<script id="template-progress" type="text/xtemplate">
    <div class="baie-upload-progress_wrap">
        <div class="baie-upload-progress">
            <div class="baie-upload-progress_bar"></div>
        </div>
    </div>
</script>

<!-- 预览框 -->
<script id="template-preview" type="text/xtemplate">
    <div class="baie-preview">
        <!--<div class="baie-preview__hd">头像裁剪</div>-->
        <div class="baie-preview__bd">
            <img src="" alt="" id="previewImage">
        </div>
        <div class="baie-preview__ft">
            <a class="baie-preview_cancel" href="javascript:;">取消</a>
            <a class="baie-preview_confirm" href="javascript:;">完成</a>
        </div>
    </div>
</script>

CSS

/* 上传图片进度条 START */
.baie-upload-progress_wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1025;
    background-image: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e);
    pointer-events: auto;
}
.baie-upload-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 50%;
    height: .25rem;
    background: #262626;
    overflow: hidden;
    border-radius: .40rem;
    border: .06rem solid transparent;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.baie-upload-progress_bar {
    position: relative;
    background-color: #5bc0de;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: .80rem .80rem;
    background-size: .80rem .80rem;
    border-radius: .40rem;
    float: left;
    height: 100%;
    line-height: .40rem;
    font-size: .24rem;
    color: #fff;
    text-align: center;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    /*-webkit-transition: width .6s ease;*/
    /*transition: width .6s ease;*/
    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@keyframes progress-bar-stripes {
    0% {
        background-position: .80rem 0;
    }
    100% {
        background-position: 0 0;
    }
}
@-webkit-keyframes progress-bar-stripes {
    0% {
        background-position: .80rem 0;
    }
    100% {
        background-position: 0 0;
    }
}
@-webkit-keyframes animate-positive{
    0% { width: 0; }
}
@keyframes animate-positive{
    0% { width: 0; }
}
/* 上传图片进度条 END */

/* 预览框 START */
.baie-preview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1023;
    background-color: #000;
    pointer-events: auto;
}
.baie-preview__hd {
    padding: .18rem 0;
    text-align: center;
    font-size: .32rem;
    color: #fff;
}
.baie-preview__bd {
    position: absolute;
    left: .30rem;
    right: .30rem;
    top: .80rem;
    bottom: .80rem;
    text-align: center;
    overflow: hidden;
}
.baie-preview__bd>img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%;
}
.baie-preview__ft {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1025;
    height: .88rem;
    line-height: .88rem;
    background-color: #131313;
    text-align: center;
    font-size: .30rem;
    font-weight: bold;
}
.baie-preview_cancel,.baie-preview_confirm {
    height: 100%;
    padding: 0 .56rem;
    color: #fff;
}
.baie-preview_cancel {
    float: left;
}
.baie-preview_confirm {
    float: right;
}
/* 预览框 END */

JS

/* 单图上传 */
singlePhotoUpload({
    target: '.J_avatar', //目标图片
    selectBtn: 'selectfiles' , //上传按钮ID
    maxFileSize: '50mb', //文件大小
    isCrop: true, //是否裁剪
    callback: function(imgUrl){ //确认回调
        Baie.Fecth({
            type: 'POST',
            url: Baie.API.Member.user.coverEdit,
            data: {imgUrl: imgUrl}
        })
    }
});