1 上传文件

后端接到数据后保存在upload_file文件夹下

前端依然使用FormData处理文件

contentType:false的意思是使用FormData默认的Content-Type值

processData:false的意思是不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器

2 loading效果

需要先搞一个这样的gif

让其在上传开始时显示，其余时间不显示

<!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><style>img {display:none;width:200px;height:200px;}</style>
</head>
<body><input type="file"><button>上传文件</button><img src="loading.gif" alt="">
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script>$(document).ajaxStart(function() {$('img').show()})$(document).ajaxStop(function() {$('img').hide()})$('button').on('click',function() {files = $('input')[0].filesif (files.length <= 0) {return alert('请选择要上传的文件')}FormData_obj = new FormData()FormData_obj.append('file',files[0])$.ajax({type:'POST',url:'http://127.0.0.1:5000/upload',data:FormData_obj,contentType:false,processData:false,success:function(res) {console.log(res)}})})
</script>
</html>

Ajax请求开始时会执行ajaxStart()，自jQuery1.8后，ajaxstart()只能给document，因为只能给document所以ajaxStart会监听当前document内所有的Ajax请求

Ajax请求结束时会执行ajaxStop()

除此之外还有很多请求的方法，详细可以看一下文档 jQuery 参考手册 - Ajax

上传过程中会显示loading.gif

上传完成后会消失

6.jQuery中的Ajax上传文件相关推荐

ajax上传 java,javaWeb中使用ajax上传文件
javaWeb上传图片上传文件所必要的两个jar包:commons-fileupload.jar.commons-io.jar. 核心代码: String withPath = req.getSer ...
jquery form插件(ajax)上传文件实现及原理
原理: jquery form插件ajax上传文件的原理, 1.浏览器实现了XMLHttpRequest level2规范的,则插件使用xhr直接提交文件.通常来说chrome.firefox都实现了 ...
flask ajax 上传图片,flask jQuery ajax 上传文件
1.html 代码注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
ajax ashx 请选择文件,ajax+jquery+ashx如何实现上传文件
ajax+jquery+ashx如何实现上传文件第一:建立Default.aspx页面 ajax图片上传 function upload(){ var path = document.getElem ...
jsp通过ajax上传文件，基于jquery
#前言推荐讲解:使用ajax提交form表单,包括ajax文件上传推荐讲解:HTML5+Ajax上传文件建议:看这篇之前,请先了解直接form表单提交servlet方式上传文件 jsp上传文件 ...
Jquery+ajax上传文件
前言: 之前做文件操作都是直接通过表单提交的,这几天做了一个前台用jquery+ajax上传文件,后台用MVC接受文件,由于第一次用jquery+ajax做上传文件,所以用来写个博客.方便以后直接用. ...
页面无刷新ajax上传文件--模拟iframe，超简单
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...
JS中使用FormData上传文件、图片的方法
参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...

6.jQuery中的Ajax上传文件

1 上传文件

2 loading效果

6.jQuery中的Ajax上传文件相关推荐

最新文章

热门文章