HTML5+ajax上传图片/文件以及FormData使用简单讲解

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(1868)   2023-03-28 11:29:14
HTML5+ajax上传图片/文件以及FormData使用简单讲解

HTML5中FormData的使用,解决ajax上传文件/图片难题
1.FormData的创建和使用方式一
创建一个空的 FormData
var fd= new FormData();

使用 append() 方法向该对象里添加字段
fd.append("username", "Groucho");
fd.append("userfile", fileInputElement.files[0]);

2.FormData的创建和使用方式二
使用HTML表单来初始化一个FormData对象
<form id="test-form">
<input type="text" name="name"/>
<input type="password" name="pwd"/>
</form>
 
var formElement = document.getElementById("test-form");

var newFormData = new FormData(formElement);

在有了FormData对象之后使用ajax(这里简单引用的jQuery的ajax)
 
$.ajax({
    url:'Your Post Url',
    type:'POST',//上传文件必须为POST,查看解释一
    data:newFormData,//FormData对象
    processData:false,//不转换请求数据
    contentType:false,//contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符
    success:function(data){
        //成功回调
    },
    error:function(ex){
        //错误回调
    }
});

解释一:这里我们就要先说说在 http 中传输文件的问题。起初,http 协议中没有上传文件方面的功能,直到 rfc1867 为 http 协议添加了这个功能。当然在 rfc1867 中限定 form 的 method 必须为 POST , enctype = “multipart/form-data” 以及<input type = "file">.
地址:https://www.leftso.com/article/189.html

相关阅读

HTML5+ajax上传图片/文件以及FormData使用简单讲解,HTML5,ajax上传文件,ajax
Java编程之Spring Boot 文件上传 REST风格API ajax方式
IE9 jQuery ajax文件上传兼容问题解决。主要通过jQuery的jquery.form插件解决的IE9不支持formData的文件上传问题。
jQuery的$.ajax()使用及API文档,jQuery,ajax,$.ajax()
ie9 jquery ajax跨域问题解决, ajax ie9 跨域问题解决,jquery,ajax,ie9
MIME 参考手册/HTTP文件上传格式过滤
​Spring Boot 或者Spring MVC 判断请求类型是否为Ajax请求具体如下:public static boolean isAjaxRequest(HttpServletRequ...
做项目的时候经常遇到需要文件上传和限制文件上传的格式,文件格式虽然前端js能限制一次。但是作为稳定的后端服务,还是需要再次校验保证格式接口的稳定性。首先创建一个集合,用于存放那些文件格式支持上传...
bootstrap-select ajax动态添加值中遇到的IE兼容问题解决
el-upload图片上传安卓无法调用相机问题解决,vue 使用element-ui的文件上传组件el-upload安卓无法调用相机问题解决办法