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"
    titleDocument/title
    link rel="stylesheet" href="https://cdn.s*tat**icfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" 
    script src="https://cdn.s*t*a*ticfile.org/jquery/2.1.1/jquery.min.js"/script
    script src="https://cdn.st**a*ticfile.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标签 来显示上传成功以后的图片 --
    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.li*ulon*gb*in.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.li*u*lon*gbin.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"
    titleDocument/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.liul**on*gbin.top:3006/api/upload/avatar',
                    data: fd,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        console.log(res);
                    }
                })
 
            })
 
        })
    /script
/body
 
/html

到此这篇关于Ajax实现上传图像功能的示例详解的文章就介绍到这了,更多相关Ajax上传图像内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

• ajaxFileupload实现多文件上传功能
• 基于Ajaxupload的多文件上传操作
• Ajax配合Spring实现文件上传功能代码
• Ajax实现文件上传功能(Spring MVC)
• AJAX实现文件上传功能报错Currentrequestisnotamultipartrequest详解