黄色电影一区二区,韩国少妇自慰A片免费看,精品人妻少妇一级毛片免费蜜桃AV按摩师 ,超碰 香蕉

Ajax實(shí)現(xiàn)上傳圖像功能的示例詳解

最終效果展示

xhr發(fā)起請(qǐng)求

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <link rel="stylesheet"  rel="external nofollow" >
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
 
<body>
    <!--1、文件選擇框  -->
    <input type="file" id="file1">
    <!-- 2、上傳文件的按鈕 -->
    <button id="btnupload">上傳文件</button>
    <br/>
    <div class="progress" style="width:300px;margin:5px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%;" id="precent">
            0%
        </div>
    </div>
    <!-- 3、img標(biāo)簽 來顯示上傳成功以后的圖片 -->
    <img alt="" id="img" width="800">
 
    <script>
       var precent = document.queryselector('#precent')
        var btnupload = document.queryselector('#btnupload')
        btnupload.addeventlistener('click', function() {
            var files = document.queryselector('#file1').files
            if (files.length <= 0) {
                return alert('請(qǐng)選擇要上傳的文件')
            }
 
            var fd = new formdata()
            fd.append('avatar', files[0])
            var xhr = new xmlhttprequest()
 
            xhr.upload.onprogress = function(e) {
                console.log(e);
                if (e.lengthcomputable) {
                    var h = math.ceil((e.loaded / e.total) * 100)
                    precent.style.width = h + '%'
                    precent.innerhtml = h + '%'
                    console.log(h);
                }
            }
            xhr.upload.onload = function() {
                $('#precent').removeclass().addclass('progress-bar progress-bar-success')
            }
 
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)
            xhr.onreadystatechange = function() {
                if (xhr.readystate == 4 && xhr.status == 200) {
                    var data = json.parse(xhr.responsetext)
                    console.log(data);
                    if (data.status == 200) {
                        console.log('上傳成功');
                        document.queryselector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        console.log('上傳失敗');
                    }
                }
            }
        })
    </script>
</body>
 
</html>

ajax發(fā)起請(qǐng)求

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <script src="jquery.js"></script>
    <style>
        img {
            width: 50px;
            height: 50px;
            display: none;
        }
    </style>
</head>
 
<body>
    <input type="file" id="file1">
    <button id="btnupload">上傳文件</button>
    </br>
    <img src="5-121204193r5-50.gif" alt="" id="loading">
    <script>
        $(function() {
            $(document).ajaxstart(function() {
                $('#loading').show()
            })
            $(document).ajaxstop(function() {
                $('#loading').hide()
            })
            $('#btnupload').on('click', function() {
                var files = $('#file1')[0].files
                if (files.length <= 0) {
                    alert('請(qǐng)選擇文件')
                }
                console.log('ok');
                var fd = new formdata()
                fd.append('avatar', files[0])
                $.ajax({
                    method: 'post',
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    data: fd,
                    processdata: false,
                    contenttype: false,
                    success: function(res) {
                        console.log(res);
                    }
                })
 
            })
 
        })
    </script>
</body>
 
</html>

到此這篇關(guān)于ajax實(shí)現(xiàn)上傳圖像功能的示例詳解的文章就介紹到這了,更多相關(guān)ajax上傳圖像內(nèi)容請(qǐng)搜索碩編程以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持碩編程！

相關(guān)文章