html5+javascript实现简单上传的注意细节


Posted in Javascript onApril 18, 2016

简单记录下今早做H5上传中一些代码还有坑

一、展示

因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有

html5+javascript实现简单上传的注意细节

解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示的内容可以做成自己想要的样子。代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <title></title>
  <style>
   div{width: 100%;}
   .logo img{display:block; margin:0 auto;}
   .upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;
     color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;
     margin: 0 auto;
     }
   .upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
   .upload form input{width: 100%;}
  </style>
 </head>
 <body>
  <div class="logo">
   <img src="img/1.jpg" />
  </div>
  <div class="upload">
   <p>上传图片</p>
   <form>
    <input type="file" />
   </form>
  </div>
 </body>
</html>

html5+javascript实现简单上传的注意细节

样子如图,这样展现就在“上传图片”这个p标签中,点击它就有选择file的效果

二、JS代码

我这边写的蛮简单的,只是用了下h5上传的的基本功能

html代码如下,action为要请求的路径,我这边做的是当文件发生改变时就上传修改头像,input标签的name属性不能省去,具体跟后端接口有关

<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">
  <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />
</form>
var iMaxFilesize = 2097152; //2M
window.fileSelected = function() {
 var oFile = document.getElementById('imageFile').files[0]; //读取文件
 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
 if (!rFilter.test(oFile.type)) {
  alert("文件格式必须为图片");
  return;
 }
 if (oFile.size > iMaxFilesize) {
  alert("图片大小不能超过2M");
  return;
 }
 var vFD = new FormData(document.getElementById('uploadForm')), //建立请求和数据
  oXHR = new XMLHttpRequest();
 oXHR.addEventListener('load', function(resUpload) {
  //成功
 }, false);
 oXHR.addEventListener('error', function() {
  //失败
 }, false);
 oXHR.addEventListener('abort', function() {
  //上传中断
 }, false);
 oXHR.open('POST', actionUrl);
 oXHR.send(vFD);
};

细节决定成败,所以做任何事情都要认真对待。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
You might like
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
js实现放大镜特效
2017/05/18 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
JS作用域链详解
2017/06/26 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
如何将python中的List转化成dictionary
2016/08/15 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python递归函数实例讲解
2019/02/27 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python右对齐的实例方法
2020/07/05 Python
影视艺术学院毕业生自荐信
2013/11/13 职场文书
经理秘书岗位职责
2013/11/14 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
授权委托书
2014/09/17 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
股权转让协议书
2014/12/07 职场文书
525心理健康活动总结
2015/05/08 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android