Ajax图片上传

图片上传是一种几乎在每一个项目中都会遇到,下面就我自己的经验给大家介绍下前端如何使用jquery中的ajax提交图片

首先上html代码

<form>
<lable>姓名</label><input type='text' name='yoruname'/>
<label>文件上传</label><input type='file'  name='file' accept='image/*' />
<button>提交</button>
</form>

下面js代码

$("button").click(function(){
var  formdata= new FormData();
var myname = $("form input[name='yourname']").val();//获取姓名
var files = $("form input[name='yourname']")[0].file[0];//获取图片的值

formdata.append('name':myname );
formdata.append('myfile':files);

$.ajax({
   url:'/upload/',
  type:"post",
  data:formdata,
  dataType:"json",
  processData: false,  //禁止对数据转码,
  contentType: false ,  //禁止设置请求头
  success:function(data){
    console.log(data)

}

})

})

注意我们用的newData方法。这是重要的一个知识点。

希望我的分享能够对初学者有一定的帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注