jquery ajax方式上传文件

发布于 / JavaScript / Comments Off on jquery ajax方式上传文件

例如现有个表单,代码如下

<form enctype="multipart/form-data">
<b>请选择文件<b><input type="file" name="file" class="upload"/>
</form>
<input onclick="sub()" type="button" value="上传"/>

注意input写到form的外面。如果input写到表单内部,type=submit,提交的时候会进入接受文件的接口,为了无刷新提交表单,我们采用ajax方式提交表单。

js代码如下:

function sub(){
  var formData = new FormData();
  formData.append("【上传文件的名称】",$("#upload")[0].files[0]);
  $.ajax({ 
      url : 【上传文件的后端接口】, 
      type : 'POST', 
      data : formData, 
      dataType: "json",
      processData : false, 
      contentType : false,
      success : function(data) { },
      error : function(data) { } 
  });
}

success和error分别是上传成功和失败后的函数。datatype为json,后端接口应为json传参。这样,文件就会通过jquery ajax无刷新上传到后端。

转载原创文章请注明,转载自: 斐斐のBlog » jquery ajax方式上传文件
评论已关闭