HTML5实现简单图片上传所遇到的问题及解决办法


Posted in HTML / CSS onJanuary 20, 2016

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

HTML5实现简单图片上传所遇到的问题及解决办法

解决办法找了下,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实现简单图片上传所遇到的问题及解决办法

样子如上图,这样展现就在“上传图片”这个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);
};

以上内容给大家分享了HTML5实现简单图片上传所遇到的问题及解决办法的相关知识,希望对大家有所帮助。

HTML / CSS 相关文章推荐
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 #HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 #HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 #HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 #HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 #HTML / CSS
You might like
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php中__toString()方法用法示例
2016/12/07 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Python笔记(叁)继续学习
2012/10/24 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
pygame实现非图片按钮效果
2019/10/29 Python
python deque模块简单使用代码实例
2020/03/12 Python
python访问hdfs的操作
2020/06/06 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
大学新生军训感言
2014/02/25 职场文书
房屋租赁意向书
2014/04/01 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
业务员辞职信范文
2015/03/02 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
pytorch实现ResNet结构的实例代码
2021/05/17 Python
js 实现验证码输入框示例详解
2022/09/23 Javascript