圖片預覽及上傳簡單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);
                }
            })
        }
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。