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

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

<input type="file" accept="image/*" capture="camera">     //调用相册和摄像头
<input type="file" accept="video/*" capture="camcorder">  //视频
<input type="file" accept="audio/*" capture="microphone">  //音频

以上传图片为例

html中的代码:

<input type="file" id="file" name="file" accept="image/*" />

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

<input type="file" id="file" name="file" accept="image/*" 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, // 注意这里应设为falseprocessData: false,    //falsecache: 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:

<form id="formTest"><input type="text" name="name1" /><input type="text" name="name2"/><input type="file" name="file" id="file"/>
</form>

js:

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

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

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

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

html:

<div class="pic" id="wholeImg"><img id="img1" src="img/a11.png"/></div>
<input type="file" name="whole" id="whole" style="display: none;" capture="camera" onchange="previewImg(this)" />

js:

$("#wholeImg").click(function(){$("#whole").click();
})function previewImg(file){//判断是否支持FileReaderif (window.FileReader) {var reader = new FileReader();} else {alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");}var preDiv = document.getElementById("wholeImg");//获取图片if (file.files && file.files[0]){var reader = new FileReader(); reader.onload = function(e){  var img = document.getElementById("img1");img.setAttribute("src",e.target.result);}reader.readAsDataURL(file.files[0]);}
}

这样就可以显示图片的内容了

转载于:https://www.cnblogs.com/dealblog/p/7760554.html

移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象相关推荐

  1. vue用form上传图片_vuejs使用FormData,ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...

  2. php ajax多图上传预览,Ajax上传图片及先预览功能的实现方法

    最近有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果, ...

  3. vue ajax上传图片

    (vue ajax上传图片) 最近在做一个手机端H5页面,需要做图片上传功能,就简单的做一个demo,后端使用的是thinkPHP5,代码此次省略, 下面贴上前端代码, HTML 代码部分: < ...

  4. 二阶段补充:文件上传服务端处理,后端文件上传、前端两种文件上传方式

    1.文件上传 2.后端文件上传 两种方案: 兼容性较好的commons-fileupload,支持所有版本的Servlet,即所有版本的Tomcat 优点: 兼容性 缺点 需要外部jar,比较麻烦.代 ...

  5. nodejs ajax进度条,Ajax异步文件上传与NodeJS express服务端处理的示例分析

    Ajax异步文件上传与NodeJS express服务端处理的示例分析 发布时间:2021-07-24 11:17:21 来源:亿速云 阅读:79 作者:小新 这篇文章主要介绍Ajax异步文件上传与N ...

  6. ajax异步上传图片文件并将其转换为base64格式

    ajax异步上传图片文件并将其转换为base64格式 高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得 ...

  7. jquery的ajax提交文件上传

    以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...

  8. c ajax 上传图片,ajax +NodeJS 实现图片上传实例

    前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note( ...

  9. jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)

    jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

最新文章

  1. 百度搜索关键字如何排名?“网站SEO”告诉你答案
  2. BENDR for BCI : 多伦多大学研究者提出受BERT启发的深度神经网络学习​海量EEG 数据...
  3. Could not find a version that satisfies the requirement pox=0.2.6 (from pathos)
  4. Oracle中RAISE异常详解
  5. 在未来给我们看病的将是医疗机器人?
  6. Spring Enable* 注解
  7. Pl/SQL Developer 配置
  8. mysql connector cpp_MySQL Connector/C++(一)
  9. 循序渐进!java读文件并重新写文件
  10. 研究:三分之一英国人或因机器人“丢饭碗”
  11. JavaScript 函数参数是传值(byVal)还是传址(byRef)?
  12. ai/ml_您应该在本周(7月11日)阅读有趣的AI / ML文章
  13. CentOS在ssh远程重装系统的步骤
  14. 关于applicaiton.yml不是绿叶子图标的处理办法
  15. java记录访问次数_Java 利用监听器来实现记录用户访问网站次数(示例代码)
  16. Eclipse-CDT
  17. Python:开发语言简介
  18. MVC.Net: 解决Attempted to access an unloaded appdomain的问题
  19. 浅谈什么是web应用防火墙(WAF)
  20. cmake错误集锦:unkown arguments specified

热门文章

  1. mui汉字图标_MUI从入门到项目实战(三)增加自定义icon图标
  2. dump java崩溃自动 不生成_一个宏命令,就可以程序崩溃时生成dump文件
  3. mvc html编辑器,MVC3 Html编辑器助手显示旧模型值
  4. 从Java代码到Java堆理解和优化您的应用程序的内存使用
  5. 百度富文本编辑jsp上传_百度富文本编辑器教程,从入门到放弃
  6. 广汽研究院BMS软件工程师_八大高手齐聚CATIA决赛,3人获“广汽技术创新能手”...
  7. python多列填充缺点_在Python中比较多列中的值并在另一列中添加新值
  8. java swing 树_Java Swing JTree 树形
  9. 使用docker搭建gitlab服务器
  10. java s0 s1_业余草告诉你Java GC 变量含义(S0 S1 E O P YGC YGCT FGC FGCT G