前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法。发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的form元素,然后通过ajax提交的时候直接提交这个对象就好了。

在移动端调用视频和音频:

//调用相册和摄像头  //视频

  //音频

以上传图片为例

html中的代码:

当然如果你想要上传多张图片也是可以的,只要加上“multiple”属性

(其实只需要写上type和id就可以了)

我们可以通过打印台看到传到的里面的内容

var file = document.getElementById("file");
console.log(file.files);

得到的是一个类似于一个数组的泛类集合,我们可以像取数组一样取到第i个:file.files[i]

在JS中,我们需要先new一个FormData对象

var form = new FormData();

然后把我们传完的图片添加到这个FormData对象中去,这里用到append

form.append("fileImg",file.files);

然后我们就可以通过ajax向后台传递数据了,我习惯用的jquery的ajax

$.ajax({
type:"post",
url:"传输的地址",
data: form,
contentType:false, //注意这里应设为false
processData: false, //false
cache: false, //缓存
success: function(data){
console.log(data);
}
})

注意:里面设为false的三个参数:

contentType:发送信息至服务器时内容编码类型,默认是application/x-www-form-urlencoded

processData:默认会把data的数据转为字符串

cache:设置为 false 将不缓存此页面

这里如果是跨域传输的话会出现问题,传文件时是不能设置dataType:"jsonp"的,会出现问题,想要跨域的话尽量不要使用这个方法(是我比较菜还不会传,手动捂脸,欢迎指导),当然通过后台设置允许访问的地址也可以

FormData对象是封闭的,没有办法通过console.log(form)打印到打印台,想要查看form对象里的值可以通过浏览器调试工具的Network里查看

通常我们传递数据当然不是只传文件,因此我们需要把要传的每一条都append到FormData里。

我们可以在html中加一个form表单并获取到它的id,然后form表单中的数据可以直接绑到FormData里

html:

js:

var formTest = document.getElementById("formTest");var form = new FormData(formTest);

这样会自动获取到form表单中name和value并添加到formdata对象里

通常我们在传入图片后,会想让图片在前台页面展示,这里我们要用到H5的FileReader。

我的做法是:前端放一张图片,点击图片的时候触发隐藏的上传文件的input,input改变时调用prewviewImg方法

html: