移动端FormData做上传图片的缺陷

前段时间应老板要求,做一个意见反馈功能,并不是在线实时反馈,而是用户选择问题分类,发表文字,以及上传问题图片.如下图

我看了一眼觉得没什么问题,上传文件类,用ajax是不行的,于是我想到了用FormData的方法,以键值对方式存取删,用法如下

//表单示例
<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">密码
<input type="submit" value="提交">
</form>

1方法示例

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码

2 添加数据

// 当然也可以在此基础上,添加其他数据
formData.append("token","kshdfiwi3rh");

//通过get(key)/getAll(key)来获取对应的value
formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组,获取key为name的所有值

3.设置修改数据

//set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

4.删除数据

//delete(key)删除数据
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []

主要就是用这几部分,来做文件上传,主要是为了把文件传给后端,因为涉及到传三张图片,所以我就以键值对的方式存到了formdata里,和后台终于把数据怼完了,在电脑上测试一切都正常,但是我们的测试到手机上发现了一个致命的问题,那就是老型手机不支持,这是一个致命的兼容问题.

安卓手机系统4.4.4版本以及4.4版本还有iphone6以及各种这种系统以下的手机根本不支持FormData这个属性,因为我们做的APP是针对中老年的阅读新闻类的,所以考虑到用户的需求,项目的严谨,这样根本不可能过关!于是我在网上查了各种兼容问题,但是这类问题在网上的解说少之又少!
所以我只能换方法,换了插件jquery.from.js,发现该插件还是在FormData的基础上封装的!而FormData又是在原生基础上封装出来的方法,所以还不如一开始就用原生的表单提交!简单实用,何必求高大上!

奉劝大家,如果写一个移动端的上传图片,尽量用原生方法,因为安卓和ios各种兼容问题!还有如果iOS里webapp里面表单在浏览器下可以正常提交,而在APP里不能正常提交,或者后端根本获取不到内容,那就要考虑到iOS工程师是不是设置了什么属性,阻止表单提交了!

以上内容为在移动端做上传文件的经验,大家可以参考下!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复