修改上传文件的样式.限定只能上传图片.预览选中的图片.并可以取消选择

修改上传文件的样式.限定只能上传图片.预览选中的图片.并可以取消选择

1、html部分

<div class="g-right">
    <%--  用来显示预览的img标签，如果是一开始进来没有图片，就先显示固定的未上传的图片  --%>
    <img src="${pageContext.request.contextPath}/static/js/未上传.png" id="previewImage">
    <%--  用来上传文件的部分，使用accept来限定只能上传图片  --%>
    <input type="file" id="multipartFile" accept="image/*">
    <%--  删除按钮，只有当鼠标移上去的时候才会显现，点击以后取消选择了文件  --%>
    <div id="cancel" onclick="cancel();"></div>
</div>

2、css部分

<style>
    .g-right {
        height: 71px;
        width: 71px;
        float: left;
        margin-top: 0;
    }

    .g-right:hover div {
        display: inline-block;
        width: 16px;
        height: 4px;
        background: red;
        line-height: 0;
        font-size: 0;
        vertical-align: middle;
        -webkit-transform: rotate(45deg);
    }

    .g-right:hover div:after {
        content: '/';
        display: block;
        width: 16px;
        height: 4px;
        background: red;
        -webkit-transform: rotate(-90deg);
    }

    #previewImage {
        float: left;
        width: 71px;
        height: 71px;
    }

    #multipartFile {
        width: 71px;
        float: left;
        opacity: 0;
        margin-top: -71px;
        height: 71px;
    }

    #cancel {
        float: right;
        margin-top: -65px;
    }
</style>

3、js部分(需要引入jquery.js的文件)

<script>
    //取消文件的选中
    function cancel() {
        //将预览改回未上传
        document.getElementById('previewImage').src = '${pageContext.request.contextPath}/static/js/未上传.png';
        //同时取消文件选中
        document.getElementById('multipartFile').value = ''
    }

    //1、创建文件读取对象
    var x = new FileReader;
    //2、读取选中的文件
    document.getElementById('multipartFile').onchange = function () {
        x.readAsDataURL(this.files[0]);
    };
    //3、将选中的图片拿来预览
    x.onloadend = function () {
        $('#previewImage').attr("src", this.result);
        $('#previewImage').attr("width", '30px');
        $('#previewImage').attr("height", '30px');
        $('#previewImage').attr("marginRight", '10px');
        $('#previewImage').attr("borderRadius", '50%');
    };
</script>

4、测试结果