javascript html5移动端轻松实现文件上传


Posted in Javascript onMarch 27, 2020

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

用的技术主要是:

  • ajax
  • FileReader
  • FormData

HTML结构:

<div class="camera-area">
 <form enctype="multipart/form-data" method="post">
 <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/>
 <div class="upload-progress"><span></span></div>
 </form>
 <div class="thumb"></div>
 </div>

已经封装好的upload.js,依赖zepto

(function($) {
 $.extend($.fn, {
 fileUpload: function(opts) {
 this.each(function() {
 var $self = $(this);
 var doms = {
 "fileToUpload": $self.find(".fileToUpload"),
 "thumb": $self.find(".thumb"),
 "progress": $self.find(".upload-progress")
 };
 var funs = {
 //选择文件,获取文件大小,也可以在这里获取文件格式,限制用户上传非要求格式的文件
 "fileSelected": function() {
 var files = (doms.fileToUpload)[0].files;
 var count = files.length;
 for (var index = 0; index < count; index++) {
 var file = files[index];
 var fileSize = 0;
 if (file.size > 1024 * 1024)
 fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
 else
 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
 }
 funs.uploadFile();
 },
 //异步上传文件
 uploadFile: function() {
 var fd = new FormData();//创建表单数据对象
 var files = (doms.fileToUpload)[0].files;
 var count = files.length;
 for (var index = 0; index < count; index++) {
 var file = files[index];
 fd.append(opts.file, file);//将文件添加到表单数据中
 funs.previewImage(file);//上传前预览图片,也可以通过其他方法预览txt
 }
 var xhr = new XMLHttpRequest();
 xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度
 xhr.addEventListener("load", funs.uploadComplete, false);
 xhr.addEventListener("error", opts.uploadFailed, false);
 xhr.open("POST", opts.url);
 xhr.send(fd);
 },
 //文件预览
 previewImage: function(file) {
 var gallery = doms.thumb;
 var img = document.createElement("img");
 img.file = file;
 doms.thumb.html(img);
 // 使用FileReader方法显示图片内容
 var reader = new FileReader();
 reader.onload = (function(aImg) {
 return function(e) {
 aImg.src = e.target.result;
 };
 })(img);
 reader.readAsDataURL(file);
 },
 uploadProgress: function(evt) {
 if (evt.lengthComputable) {
 var percentComplete = Math.round(evt.loaded * 100 / evt.total);
 doms.progress.html(percentComplete.toString() + '%');
 }
 },
 "uploadComplete": function(evt) {
 alert(evt.target.responseText)
 }
 };
 doms.fileToUpload.on("change", function() {
 doms.progress.find("span").width("0");
 funs.fileSelected();
 });
 });
 }
 });
})(Zepto);

调用方法:

$(".camera-area").fileUpload({
 "url": "savetofile.php",
 "file": "myFile"
 });

PHP部分:

<?php
if (isset($_FILES['myFile'])) {
 // Example:
 writeLog($_FILES);
 move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
 echo 'successful';
}
function writeLog($log){
 if(is_array($log) || is_object($log)){
 $log = json_encode($log);
 }
 $log = $log."\r\n";

 file_put_contents('log.log', $log,FILE_APPEND);
}
?>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

希望本文所述对大家学习有所帮助。

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
javascript动态创建链接的方法
May 13 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
js简易版购物车功能
Jun 17 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
ajax请求data遇到的问题分析
Jan 18 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
原生js实现无缝轮播图效果
Jan 28 Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
js实现分割上传大文件
Mar 09 #Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 #Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 #Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 #Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 #Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
保时捷设计:Porsche Design
2019/03/30 全球购物
高中生自我评语大全
2014/01/19 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2014年工程师工作总结
2014/11/25 职场文书
个人先进材料范文
2014/12/30 职场文书
安全教育的主题班会
2015/08/13 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
MySQL池化框架学习接池自定义
2022/07/23 MySQL