安卓h5 ajax上传图片,移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象...
前些时候遇到移动端需要上传图片和视频的问题,之前一直通过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:
安卓h5 ajax上传图片,移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象...相关推荐
- 移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象
前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法.发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的f ...
- h5打开app_移动端产品比较分析:APP、小程序、H5
本文笔者从实际工作经验出发,结合参考相关文章,对移动端产品(APP.小程序.H5)从13个方面进行了比较分析,与大家分享. 移动端产品包括小程序(本文特指微信小程序).APP(安卓.IOS).H5页面 ...
- php后台无法接受文件,ios afnetworking2.x上传图片 服务端php无法接受文件问题
//思路如下 1.将image转成NSData 2.通过传递参数的形式 而不是formData的方式进行传输,formData(有时可以接受到,有时候不行,不稳定) 3.php获取二进制数据 进行存储 ...
- Ajax上传文件的cache、processdata、contentType属性以及FormData对象的总结
Ajax上传文件的cache.processdata.contentType属性以及FormData对象的总结 前言:在之前的Ajax一次性上传多张图片并实现预览的博客中提到,如果要用 Ajax 上传 ...
- 二阶段补充:文件上传服务端处理,后端文件上传、前端两种文件上传方式
1.文件上传 2.后端文件上传 两种方案: 兼容性较好的commons-fileupload,支持所有版本的Servlet,即所有版本的Tomcat 优点: 兼容性 缺点 需要外部jar,比较麻烦.代 ...
- h5网页在移动端(安卓)head里的title为空,默认显示url地址。js代码将head的title设置为空
h5网页在移动端(安卓)head里的title为空,默认显示url地址.js代码将head的title设置为空 解决方案: document.title='\u200E' router.beforeE ...
- 移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法
本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为 ...
- PHP+Ajax手机移动端发红包实例
PHP+Ajax手机移动端发红包实例 基本流程:当输入完红包数量和总金额后,PHP会根据这两个值进行随机分配每个金额,保证每个人都能领取到一个红包,且每个红包金额不等,并且所有红包金额总额等于总金额. ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- java 服务端解决ajax跨域问题
java 服务端解决ajax跨域问题 参考文章: (1)java 服务端解决ajax跨域问题 (2)https://www.cnblogs.com/fx2008/p/4024971.html (3)h ...
最新文章
- 大数据+机器学习#x3D;天下无敌!
- npm 安装包失败 --- 清除npm缓存
- sort函数——利用函数实现快速排序c++
- tar 备份时如何保持权限
- C语言学习之试编程从键盘输入2*3的二维数组,将该数组行列交换输出。
- activemq的使用经验
- 大数据时代的移动即时通讯
- 塘沽十三中2021年高考成绩查询,2020天津高考成绩查询
- 【Java】TCP Socket编程案例——文件传输聊天工具
- JDBC在spring中的使用
- HDU1240 POJ2225 Asteroids!【BFS】
- python日期时间_Python日期时间
- 一个PHP多个界面跳转,php中的多种界面跳转方式
- fullPage.js插件用法(转发)
- 《计算机科学导论》学习笔记
- word表格怎么缩小上下间距_word表格间距 在WORD表格中如何将行间距缩小
- 三年级计算机上册期末测试题,三年级上册期末试卷
- 听说你会Python?做几道题看看呗
- 记录下生活:ETC卡充值(上海)
- Android app调用第三方地图(百度地图,高德地图,谷歌地图)导航