图片预览及上传简单Demo

时间 2019-11-09

标签图片预览上传简单 demo 繁體版

原文原文链接

HTML结构以下，并未写css，样式主要根据项目状况进行设置

<body>
    <div class="wrap">
        <img alt="">
    </div>
    <input style='display: none' id='upload-file' type="file" onchange='fileChange(this)'>
    <button onclick='uploadImg()'>上传图片</button>
    <button onclick='saveImg()'>保存图片</button>
</body>

js代码以下

//点击自定义按钮调用input[name+"file"]的click事件
    function uploadImg() {
        $('#upload-file').click()
    };

    //预览图片
    function fileChange(file) {
        if(file.files[0]) {
            console.log(1);
            var reader = new FileReader();
            reader.readAsDataURL(file.files[0]);
            reader.onload = function (event) {
                $('.wrap img').attr('src', event.target.result)
            }

        }
    }
    
    //保存图片
    function saveImg() {
        var formdata = new FormData();
        var images = $('#upload-file').get(0).files[0];
        if(images == undefined) {
            return false
        } else {
            formdata.append('image', images);

            $.ajax({
                url: 'url',
                type: 'post',
                data: formdata,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res);
                }
            })
        }
    }