使用ajax上传文件

  有时候我们需要在web端向服务器上传文件,以前是使用form的方式进行提交,html5中支持直接使用xmlhttprequest上传文件,send对象支持blob对象而文件就是一个blob对象

ajax上传文件

ajax中可以通过参数processData这个参数来控制data是否进行转换,我们将这个参数设置为false就可以使用ajax进行文件的上传操作了

example:

$.ajax({
url: "your url",
type: "POST",
processData: false,
data: "your blob object",//blob对象
}).success(function () {
}).fail(function () {
}).always(function () {
})

将example中的url换成你自己的url,data换成通过input type=“file” 选中的文件 文件就发送成功了 这个时候服务器端收到的body中的比特流就是文件的内容

注意:使用ajax进行文件上传的时候,由于文件的比特流充满了整个body无法再进行参数的传递,此时只能通过请求的url或者是在http的head中传递参数了

  通过head传递参数: 比如有两个参数需要传递1.文件名称name,2.文件后缀extension,请求的ajax方式:

  $.ajax({
  url: "your url",
  type: "POST",
  processData: false,

  headers:{

  name:"",

  extension:""

  }
  data: "your blob object",//blob对象
  }).success(function () {
  }).fail(function () {
  }).always(function () {
  })

配合filereader对象还可以实现文件的分片上传功能,使用localstore或其他的存储技术还可以实现文件的端点续传功能

posted @ 2015-12-08 21:23  zhao379028604  阅读(2776)  评论(1编辑  收藏  举报