最终效果展示
xhr发起请求
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <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"><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><input type="file" id="file1"><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><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> |
ajax发起请求
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <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><input type="file" id="file1"><button id="btnupload">上传文件</button><img decoding="async" 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', data: fd, processData: false, contentType: false, success: function(res) { console.log(res); } }) }) })</script> |
到此这篇关于Ajax实现上传图像功能的示例详解的文章就介绍到这了,更多相关Ajax上传图像内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
