使用Ajax实现无刷新上传文件


Posted in Javascript onApril 12, 2022

最终效果展示

使用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" 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.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实现上传图像功能的示例详解的文章就介绍到这了!

Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js计算精度问题小结
Apr 22 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
小程序实现投票进度条
Nov 20 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
JavaScript中reduce()的用法
May 11 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
vue选项卡切换的实现案例
分享一个vue实现的记事本功能案例
vue代码分块和懒加载非必要资源文件
Apr 11 #Vue.js
vue打包时去掉所有的console.log
三种方式清除vue路由跳转router-link的历史记录
Apr 10 #Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
PHP自动生成月历代码
2006/10/09 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
深入了解Python在HDA中的应用
2019/09/05 Python
国培教师自我鉴定
2014/02/12 职场文书
三年级评语大全
2014/04/23 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
社区重阳节活动总结
2015/03/24 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript