Ajax怎么实现上传图像功能

2023-06-29 23:06:54 389人浏览八月长安

摘要

这篇“ajax怎么实现上传图像功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Ajax怎么实现上传图像功能”文章吧。最终效

这篇“ajax怎么实现上传图像功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Ajax怎么实现上传图像功能”文章吧。

最终效果展示

Ajax怎么实现上传图像功能

xhr发起请求

<!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" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/CSS/bootstrap.min.css" 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" >        <div class="progress-bar progress-bar-striped active"  id="precent">            0%        </div>    </div>    <!-- 3、img标签 来显示上传成功以后的图片 -->    <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('请选择要上传的文件')            }             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发起请求

<!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('请选择文件')                }                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>

以上就是关于“Ajax怎么实现上传图像功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Ajax怎么实现上传图像功能

本文链接: https://www.lsjlt.com/news/326769.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341