企业建网站费用,网络营销咨询公司,wordpress插件路径,室内设计方案FormData
FormData是XMLHttpRequest Level 2 新增的一个接口。
使用FormData可以实现各种文件上传。 使用 // 创建FormData的实例
var formdata new FormData();// 用append()为实例添加键和值
formdata.append(键名, 键值); 注意
使用jq的$.ajax()方法来进行文件上传时 new FormData();// 用append()为实例添加键和值
formdata.append(键名, 键值); 注意
使用jq的$.ajax()方法来进行文件上传时需要设置contentType和processData两个参数。
参数类型说明contentTypeString 当发送信息至服务器时内容编码类型默认为“application/x-www-form-urlencoded”。 该默认值适合大多数应用场合。 processDataBoolean 默认为true。 默认情况下发送的数据将被转换为对象从技术角度来讲并非字符串以配合默认内容类型“application/x-www-form-urlencoded”。 如果要发送DOM树信息或者其他不希望转换的信息请设置为false。
从上面两个参数的说明可以看出ajax发送数据的时候内容编码类型是“application/x-www-form-urlencoded”
而我们上传的文件可能是其他类型所以上传的时候不设置内容类型故 contentType: false
不对数据做处理故 processData: false 。 实例 !DOCTYPE html
html
headmeta charsetUTF-8titlejq实现前端文件上传/title
/head
bodyinput idfile typefilebutton idbtn上传/buttonscript srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js/scriptscript$(#btn).click(function() {var formdata new FormData();formdata.append(file, $(#file)[0].files[0]);$.ajax({type: POST,url: 你要将文件上传到的地址,data: formdata,contentType: false, // 不设置内容类型processData: false, // 不处理数据dataType: json,success: function(data) {// 请求成功后要执行的代码
},error: function(data) {// 请求失败后要执行的代码
}});});/script
/body
/html 观察 console.log($(#file)[0]);
console.log($(#file)[0].files[0]); 从上面的打印结果可以看到我们传的文件类型是“application/octet-stream”。 请求时的参数 请求后的结果 更多专业前端知识请上
【猿2048】www.mk2048.com
