写点什么

【jquery ajax】实现文件上传提交

  • 2022-11-22
    河北
  • 本文字数:1677 字

    阅读完需:约 6 分钟

JQuery 实现文件上传提交

  定义 UI 结构

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> <input type="file" id="file1">    <button id="btnUpload">上传文件</button>     <img src="" alt="" style="width: 200px;" id="img1">
复制代码

  验证是否选择了文件

        $('#btnUpload').on('click', function () {            let files = $('#file1')[0].files;            if (files.length <= 0) {                return alert('请选择文件后在上传')            }                })
复制代码

  向 FormData 中追加文件并发起 ajax 请求


           //上传文件            let fd = new FormData();            fd.append('avator', files[0]);
//发起jquery ajax请求 $.ajax({ method: 'post', url: 'http://www.liulongbin.top:3006/api/upload/avatar', data: fd, processData: false, contentType: false, success: function (res) { alert('上传成功') $('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url) console.log(res.url); } })
复制代码

  jquery 实现 loading 效果

ajaxStart(callback)Ajax 请求开始时,执行 ajaxStart 函数,可以在 ajaxStart 的 callback 中显示 loading 效果。自 jqueyr 版本 1.8 起,该方法只能被附加到文档,$(document).ajaxStart()函数会监听文档内所有 ajax 请求,当 ajax 请求开始会触发这个函数,ajax 结束则会触发 ajaxStop


  <img src="./自媒体资源/5-121204193933-51.gif" alt="" style="display: none;" id="loading" width="50px" height="50px">          $(document).ajaxStart(function () {            $('#loading').show()        })        $(document).ajaxStop(function () {            $('#loading').hide()        })
复制代码

  完整代码

<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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body> <input type="file" id="file1"> <button id="btnUpload">上传文件</button> <br> <img src="" alt="" style="width: 200px;" id="img1"> <img src="./自媒体资源/5-121204193933-51.gif" alt="" style="display: none;" id="loading" width="50px" height="50px"> <script> //监听传输 $(document).ajaxStart(function () { $('#loading').show() }) $(document).ajaxStop(function () { $('#loading').hide() })
//建立单击事件 $('#btnUpload').on('click', function () { let files = $('#file1')[0].files; if (files.length <= 0) { return alert('请选择文件后在上传') } //上传文件 let fd = new FormData(); fd.append('avator', files[0]);
//发起jquery ajax请求 $.ajax({ method: 'post', url: 'http://www.liulongbin.top:3006/api/upload/avatar', data: fd, processData: false, contentType: false, success: function (res) { alert('上传成功') $('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url) console.log(res.url); } }) }) </script></body>
复制代码



用户头像

还未添加个人签名 2022-10-14 加入

还未添加个人简介

评论

发布
暂无评论
【jquery ajax】实现文件上传提交_ajax_坚毅的小解同志_InfoQ写作社区