1035天 瑾忆

重要的人越来越少,剩下的人也越来越重要 ​​

使用FormData方法实现Ajax上传文件

发布于 30天前 / 79 次围观 / 3 条评论 / 默认 / 瑾忆

FormData对象是html5的一个对象,目前的一些主流的浏览器都已经兼容。

如果是IE,那打扰了。

之前我也试过ajax提交表单且带有文件(图片),结果后台接收不到input file的数据。

后来用了另外一种麻烦的方法,就是将图片转换成Base64再提交,显然这方法好麻烦转来转去的,得不偿失。

所以在度娘的帮助下邂逅了FormData,233

道理什么的就自行百度吧,反正我也不懂,我的能用就行,懒得去理解些什么。哈哈哈

HTML

<form id="Form">
	<input name="file" type="file">
	<input type="text" name="text" value="abcdefg">
	<input type="button" value="提交" class="btn"/>
</form>

JS

	$('.btn').click(function (){
		//创建这个所谓的FormData对象,哈哈
		var form = new FormData(document.getElementById("Form"));
		$.ajax({
			url:"你的接口连接",
			type:"POST",
			data:form,
			processData:false,
            contentType:false,
			mimeType:"multipart/form-data",
			success:function(data){
				//成功
			},
			error:function(e){
				//错误
			}
		});  
		return false;
	});

不才,不会说明怎么使用,大概就是这个样子,我是实践成功了,遇到问题就去找下万能的度娘。

  1. 3周前 (05-03)
    @

    不得不说,你这个模板很好看

    • 3周前 (05-05)
      @ NO

      @知识共享网:Thanks♪(・ω・)ノ

  2. 3周前 (05-03)
    @

    写的不错