web uploader 删除图片 及样式实现

定义webuploader.css 文件

.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;
}

/*demo样式*/
#uploader-demo .thumbnail {
    width: 110px;
    height: 110px;
}

#uploader-demo .thumbnail img {
    width: 100%;
}

.uploader-list {
    width: 100%;
    overflow: hidden;
}

.file-item {
    float: left;
    position: relative;
    margin: 0 20px 20px 0;
    padding: 4px;
}

.file-item .error {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    background: red;
    color: white;
    text-align: center;
    height: 20px;
    font-size: 14px;
    line-height: 23px;
}

.file-item .info {
    position: absolute;
    left: 4px;
    bottom: 4px;
    right: 4px;
    height: 20px;
    line-height: 20px;
    text-indent: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    z-index: 10;
}

.upload-state-done:after {
    content: "\f00c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 32px;
    position: absolute;
    bottom: 0;
    right: 4px;
    color: #4cae4c;
    z-index: 99;
}

.upload-state-done-file:after {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 32px;
    position: absolute;
    bottom: 0;
    right: 4px;
    color: #4cae4c;
    z-index: 99;
}




/* 自定义上传样式  用于上传图片可删除   */
.uploader-demo .uploader-list div.file-panel {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

.uploader-demo .uploader-list div.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    background: url(icons.png) no-repeat;
    margin: 5px 1px 1px;
    cursor: pointer;
}

.uploader-demo .uploader-list div.file-panel span.rotateLeft {
    background-position: 0 -24px;
}

.uploader-demo .uploader-list div.file-panel span.rotateLeft:hover {
    background-position: 0 0;
}

.uploader-demo .uploader-list div.file-panel span.rotateRight {
    background-position: -24px -24px;
}

.uploader-demo .uploader-list div.file-panel span.rotateRight:hover {
    background-position: -24px 0;
}

.uploader-demo .uploader-list div.file-panel span.cancel {
    background-position: -48px -24px;
}

.uploader-demo .uploader-list div.file-panel span.cancel:hover {
    background-position: -48px 0;
}

 

  图片 在这里  自行下载icons.png

 

使用方式 

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

 

页面引入 css 和 js 不在写代码了

 

 

// 图片上传demo
$(function () {
    var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
        ratio = 1 || 1,

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

        // 初始化Web Uploader
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/content/plugins/webuploader/Uploader.swf',
            fileNumLimit: 1,
            // 文件接收服务端。
            server: getRootPath() + '/uploadPicture',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            formData: {
                destDir: "user"
            },
            // 不压缩image
            resize: false,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'   //修改这行
            }
        });

    // 当有文件添加进来的时候
    uploader.on('fileQueued', function (file) {
        var $list = $('#fileList');
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<p class="imgWrap"><img></p>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
            ),
            $img = $li.find('img');
        var $btns = $('<div class="file-panel">' +
            '<span class="cancel" >删除</span>').appendTo($li);
        $li.on('mouseenter', function () {
            $btns.stop().animate({height: 30});
        });
        $li.on('mouseleave', function () {
            $btns.stop().animate({height: 0});
        });
        // $list为容器jQuery实例
        $list.append($li);
        $btns.on('click', 'span', function () {
            var index = $(this).index();
            switch (index) {
                case 0:
                    uploader.removeFile(file);
                    removeFile(file);
                    return;
            }
        });
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);
    });
    uploader.on('beforeFileQueued',function (file) {
        //限制个数
        var fileNumLimit =uploader.options.fileNumLimit;
        var completeNum = uploader.getFiles("complete").length;
        if (fileNumLimit == completeNum){
            $.fn.modalAlert("最大上传"+fileNumLimit+"个文件，不能超过","error");
        }
        /*console.log("上传限制"+);
        console.log("上传成功"+);*/
    });
    // 文件上传过程中创建进度条实时显示。
    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, response) {
        //photoList.push(JSON.parse(response._raw));
        //$("#photo").val(JSON.stringify(photoList));
        $("#photo").val(response._raw);
        var fileStatusnum = uploader.getStats();
        // $.fn.modalMsg("上传成功"+fileStatusnum.successNum+"个文件","success");
        $.fn.modalMsg("上传成功", "success");
        $('#' + file.id).addClass('upload-state-done');
    });

    // 文件上传失败，显示上传出错。
    uploader.on('uploadError', function (file) {
        //alert("失败");
        var $li = $('#' + file.id),
            $error = $li.find('div.error');
        // 避免重复创建
        if (!$error.length) {
            $error = $('<div class="error"></div>').appendTo($li);
        }
        $error.text('上传失败');
        var fileStatusnum = uploader.getStats();
        layer.msg("上传失败" + fileStatusnum.uploadFailNum + "个文件", {icon: 1, time: 1000});
    });

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

    // 负责view的销毁
    function removeFile( file ) {
        var $li = $('#'+file.id);
        $li.off().find('.file-panel').off().end().remove();
    }

});

fileNumLinit  我写1   只为了测试  个人根据项目修改限制个数

 

效果