主要介绍如何用JQuery与FormData如何上传一个或者多个文件。
1.首先利用input的type属性中的file选择上传文件，如果要上传多个文件在input属性中添加multiple属性，这个属性类似于checkbox可以对文件进行多选。
如下：
2.引入JQ文件后，给按钮设置点击事件，当我们点击的时候对文件进行上传。
第一步：获取文件并将其转化为dom对象，获取files属性
$(function(){ $('#btnSend').on('click',function(){ //第一步：获取文件以及里面的files属性 var myFile = $('#file')[0].files }) })3.做一个判断是否选择了文件（总得有文件才能上传吧QAQ）
获取到的files对象里有一个属性length，代表了选择文件的个数。当length小于等于0时弹框提示。
$(function(){ $('#btnSend').on('click',function(){ //获取文件以及里面的files属性 var myFile = $('#file')[0].files //判断是否选择了文件 if(myFile.length<=0) return alert('请选择文件！') }) }) 4.根据上传文件数量循环创建formdata对象。
$(function(){ $('#btnSend').on('click',function(){ //获取文件以及里面的files属性 var myFile = $('#file')[0].files //判断是否选择了文件 if(myFile.length<=0) return alert('请选择文件！') //循环创建formdata对象 for(var i = 0;i
5.用formData里的append方法，把文件信息添加到formData里面
$(function(){ $('#btnSend').on('click',function(){ //获取文件以及里面的files属性 var myFile = $('#file')[0].files //判断是否选择了文件 if(myFile.length<=0) return alert('请选择文件！') //循环创建formdata对象 for(var i = 0;i
这个avatar只是取个名字一般叫这个，头像的意思 同阿凡达QAQ
6.发送请求，为了后期使用方便我们可以把发送请求封装成一个方法。
//封装请求函数 function sendFile(formData){ $.ajax({ // 请求路径 url:'http://www.liulongbin.top:3006/api/upload/avatar', // 请求类型 type:'post', // 上传的数据 data:formData, // 默认为true，上传的数据以字符串形式上传，当上传文件时不需要转换为字符串，所以改为false processData:false, // 表示前端发送数据的格式 // 默认是以字符串的形式 如 id=2019 & password= // 无法传递复杂数据，所以改为false contentType:false, // 请求成功时执行的函数 success:function(res){ // 对状态码进行判断 if(res.status==200){ // 我这里上传的是图片，所以做了一个图片预览，将图片展示到页面上 // 创建图片标签 var img = $('![用JQuery与FormData上传文件]()
') // 根据返回的数据设置图片地址 img.attr('src','http://www.liulongbin.top:3006'+res.url) // 将图片添加到body 展示到页面上 $('body').append(img) } } }) }
调用请求方法：
$(function(){ $('#btnSend').on('click',function(){ //获取文件以及里面的files属性 var myFile = $('#file')[0].files //判断是否选择了文件 if(myFile.length<=0) return alert('请选择文件！') //循环创建formdata对象 for(var i = 0;i
以上就完成了JQuery对文件的上传。
总体代码如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/219434.html原文链接：https://javaforall.net
