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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Vue.js实例方法之生命周期详解
Jul 03 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 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 中文处理技巧
2010/04/25 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
小谈php正则提取图片地址
2014/03/27 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
实例讲解php数据访问
2016/05/09 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
ScrollDown的基本操作示例
2013/06/09 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Pycharm设置界面全黑的方法
2018/05/23 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python对于requests的封装方法详解
2019/01/03 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
美国健康和保健平台:healtop
2020/07/02 全球购物
Java基础面试题
2012/11/02 面试题
老师对学生的评语
2014/04/18 职场文书
关键在于落实心得体会
2014/09/03 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS