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 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
详解JavaScript 事件流
Sep 02 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中文乱码解决方案
2015/03/05 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JS动画定时器知识总结
2018/03/23 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
react 生命周期实例分析
2020/05/18 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python 的类、继承和多态详解
2017/07/16 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
临床医学专业毕业生的自我评价
2013/10/17 职场文书
学生会离职感言
2014/02/11 职场文书
客户答谢会活动方案
2014/08/31 职场文书
汽车转让协议书范本
2014/12/07 职场文书
就业意向书范本
2015/05/11 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
HttpClient实现文件上传功能
2022/08/14 Java/Android