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 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
js onclick事件传参讲解
Nov 06 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
JavaScript从原型到原型链深入理解
Jun 03 Javascript
原生JS实现烟花效果
Mar 10 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
js实现点击烟花特效
Oct 14 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
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python中的并发编程实例
2014/07/07 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
房屋租赁协议书(标准版)
2014/10/02 职场文书
2014年计划生育工作总结
2014/11/14 职场文书