简单的form表单文件上传

<form method="post" enctype="multipart/form-data" id="file_upload">

  <p>图片预览:</p>
  <div id="test-image-preview"></div>
  <p>
    <input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
  </p>
<p id="test-file-info"></p>
</form>

这是一个简单的form表单,文件提交之后, $("form")[0]   // <form method=​"post" enctype=​"multipart/​form-data" id=​"file_upload">​…​</form>​
取到外层的from 节点,然后 初始化一个 FormData 对象

var _formData = new FormData($("form")[0]),

然后ajax 提交就完成了。   (此时可以通过   $("#test-image-file")[0].files[0]  去获取上传图片的详细信息

FormData里面的数据可以理解为私有变量。所以在控制台是看不出来的,要用FormData的get 方法才能拿到。

_formData.get('test');  这样子 就能拿到上面那个 input name 是test的值了

$.ajax({
  url : "http://xxxxxxxxxxxxxx",
  type:"post",
  data:_formData,
  processData:false

})

 

posted @ 2018-11-29 10:10  xyyyy  阅读(882)  评论(0编辑  收藏  举报