这篇文章将为大家详细讲解有关HTML5图片上传所遇到的问题及解决办法的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
因为前端上传文件是必须通过形式表单的,不能使用ajax,这样的话一个移动页面放入一个类型为文件的输入真心不怎么好看,如下图,很挫有没有
解决办法找了下,电脑上有些是把这个输入换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用形式表单的形式,只是把这个形式和输入的透明度设置为0,让它们和准备显示的内容同时在一个p中,显示的内容可以做成自己想要的样子。代码如下:
代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,user-scalable=no"比;
& lt; title> & lt;/title>
& lt; style>
p{宽度:100%;}
.logo img{显示:块;保证金:0汽车;}
.upload{位置:相对;宽度:80 px;高度:18 px;行高:18 px;背景:# 2 fc7c9; text-align:中心;
颜色:# FFF;填充:0 px 5 px; -webkit-border-radius: 2 px; border - radius: 2 px;
保证金:0汽车;
}
.upload形式{宽度:100%;位置:绝对;左:0;上图:0;不透明度:0;过滤器:α(不透明度=0);}
.upload表单输入{宽度:100%;}
& lt;/style>
& lt;/head>
& lt; body>
类& lt; p=發ogo"祝辞
https://www.yisu.com/zixun/& lt; img src=" img/1. jpg "/>
上传图片
<>形式
