移动端HTML5实现打电话，发短信，发邮件，文件上传

最新推荐文章于 2024-06-25 22:37:16 发布
最新推荐文章于 2024-06-25 22:37:16 发布
阅读量8.2k 收藏 2
点赞数
分类专栏： web前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/50916704
版权
本文介绍了如何在移动端使用HTML5的ajax、FileReader和FormData接口实现图片上传功能，包括HTML结构、JavaScript封装的upload.js以及PHP后台处理部分。通过创建FormData对象、监听上传进度并预览图片，实现了无插件的文件上传。
摘要由CSDN通过智能技术生成 
<a href="tel:400-888-6633">拨打电话<a>

<a href="sms:19956321564">发送短信<a>

<a href="mailto:mail@mail.com">发送邮件<a>


兄弟文章：http://blog.csdn.net/libin_1/article/details/50433863

PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。
用的技术主要是：
ajax
FileReader
FormData
HTML结构：

 
 
 

  
  
  

   
   
   XML/HTML Code
   
   
   复制内容到剪贴板
  
  
  

  
  
  

   
   
   
    
    
  1. <div class="camera-area">   
    2. 
    
  2.       <form 
    3.
最低0.47元/天 解锁文章
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 sms短信发送_使用电子邮件免费向手机发送短信（SMS）
culintai3473的博客
09-11 2854
html5 sms短信发送Sometimes being able to send out a quick text message to someone you know would definitely be helpful. But what if you are at your computer and can not use your mobile phone? Just fire up...
html5手机移动端实现发短信,打电话功能代码.zip
01-14
html5手机移动端实现发短信,打电话功能代码.zip
前端 html5页面调用手机打电话，发送短信功能
weixin_51528680的博客
10-10 1208
400-0000-688发短信：发短信
H5怎么唤醒打电话和发短信
最新发布
m0_57918681的博客
06-25 162
直接利用a标签的能力即可，按照所规定的格式就OK，非常的简单。
html5页面调用手机打电话功能
热门推荐
hwm的专栏
01-20 2万+
里面加上： 需要拨打电话的地方：400-0000-688 发短信：发短信 完成。 点击 页面上的电话号码 ，页面会调用手机的电话接口。
html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能详解
xmt1139057136的专栏
06-21 1万+
在很多的手机网站上，有打电话和发短信的功能，对于这些功能是如何实现的呢。其实不难，今天我们就用html5来实现他们。简单的让你大开眼界。 HTML5 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这...有 HTML5 启动模板、空白图片、打电话和发短信、自动完成等等,帮助你提高开发效率的同时，还带来了更炫的功能。好了，我们今天就来做一做看看效果吧！！ 看代码： 伪专
移动端HTML5实现文件上传功能【附代码】
09-28
在移动端开发中，实现文件上传是一个常见需求。随着HTML5的普及，我们可以利用它提供的接口来实现一个不需要额外插件的文件上传功能。本文将介绍如何使用HTML5、JavaScript以及Ajax技术在移动端实现一个简单的图片...
移动端HTML5实现文件上传
09-28
在移动端实现HTML5文件上传，主要涉及到HTML5的新特性，如`<input type="file">`、FormData、Ajax异步请求以及Progress事件等。这些技术的结合使得在没有传统Flash插件支持的情况下，也能在移动设备上实现便捷的文件...
javascript html5移动端轻松实现文件上传
10-22
主要为大家详细介绍了javascript html5移动端轻松实现文件上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能具体解释...
weixin_30273763的博客
06-23 102
在非常多的手机站点上，有打电话和发短信的功能，对于这些功能是怎样实现的呢。事实上不难，今天我们就用html5来实现他们。简单的让你大开眼界。HTML5 非常easy写,但创建网页时,您常常须要反复做相同的任务,如创建表单。在这...有 HTML5 启动模板、空白图片、打电话和发短信、自己主动完毕等等,帮助你提高开发效率的同一时候。还带来了更炫的功能。好了。我们今天就来做一做看看效果吧！！看代码...
html5创建手机通讯录代码,uni-app获取手机通讯录（基于HTML5+）
weixin_39777543的博客
06-07 830
官方API：https://www.html5plus.org/doc/zh_cn/contacts.html话不多说，直接上代码contacts.vue获取联系人{{item.displayName}}{{subitem.value}}var Contactsexport default {data() {return {list: []}},onShow() {uni.setNavigatio...
html5通讯录模板,[应用模板]HTML5+Phonegap通讯录
weixin_39715926的博客
07-01 729
[](https://s4.51cto.com/images/blog/202104/11/82bbf492c5c800c72052b4cef377f53c.png?柔性数组：结构体的最后一个元素数组的大小可以是未知数字大小结构体柔性数组前必须至少有一个其他成员，sizeof返回的结构体大小不包括柔性数组大小写了两个代码，第一次用了一次动态内存开辟，第二次用来两次内存...即时通讯软件在我们身边...
html5 手机号直接拨打,html5拨打电话及发短信
weixin_36461619的博客
07-17 263
IIS7&plus;windows 64位配置注意事项问题和解决办法 1 如果网站为Asp:再asp中注意启用父路径 2 操作必须使用一个可更新的查询:给用户iis_iusrs 一个完全控制的权限 3 Windows(64位IIS)未在本地计算机上 ...python类相关class A: def bar(self): print("BAR") self.f1() class B(A...
html5 手机站点,HTML5移动端手机网站基本模板 HTML5基本结构
weixin_30523059的博客
05-31 1012
HTML5移动端最基本网页模板代码(以下HTML代码可直接拷贝复制使用)：手机网站最基本HTML模板body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}.viewport{ max-width:640px; min-width:300px; margin:0 au...
HTML5学习笔记第二节（Email标签（自动验证格式），Number标签，URL标签...）
weixin_30258901的博客
11-28 442
介绍与导航， ---------------------------------------------------------------------------------------- 1.Email输入框,自动验证Email有效性。 2.number数字输入，验证正确，可以设置开始结束位。 3.URL输入框，可以验证URL输入的有效性。 4.Date pickers (date,...
创建和发送HTML电子邮件的新手指南
sensor_WU 博客
03-08 9331
进入你的收件箱的电子邮件可能有两种方式：纯文本：这几乎是现代的电报。没有造型或最低限度的格式，收件人看到的是文字，而不包含其他东西。HTML：与纯文本相比，它是一个爆炸性的设计，而且是重在设计。它使用HTML代码来展示电子邮件，尽管正如我们将要讨论的，它并不总是利用现代网络标准。例如，如果你收到的是纯文本电子邮件，你就会知道，因为它看起来完全是一个纯文本文件。相比之下，HTML电子邮件看起来与现代网页几乎一样（给或不给一些风格和格式问题）。--浏览器内的HTML电子邮件。
html5读取手机文件上传,移动端HTML5实现文件上传功能
06-01
移动端HTML5可以使用input标签的type属性为file来实现文件上传功能。具体实现步骤如下： 1. 在HTML页面中添加一个input标签，设置type为file。 2. 在input标签中添加一个change事件监听器，当用户选择文件后触发。 3. 使用FileReader对象读取用户选择的文件。 4. 将读取到的文件内容上传到服务器。 下面是一个简单的示例代码，供参考： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文件上传示例</title> </head> <body> <input type="file" id="file-input"> <script> var fileInput = document.getElementById('file-input'); fileInput.addEventListener('change', function() { var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function() { // 将读取到的文件内容上传到服务器 // ... }; reader.readAsDataURL(file); }); </script> </body> </html> ``` 需要注意的是，文件上传功能需要和服务器端配合实现。在上传文件之前，需要先向服务器发送一个POST请求，获取上传文件所需的参数，然后再将文件内容发送到服务器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值