这篇文章主要为大家详细介绍了 html5+javascript 实现上传操作的注意细节,form 表单样式不美观等细节问题,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
简单记录下今早做 H5 上传中一些代码还有坑
一、展示
因为前端上传文件是必须通过 form 表单的,不能使用 ajax,这样的话一个移动页面放入一个 type 为 file 的 input 真心不怎么好看,如下图,很挫有没有
解决办法找了下,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>
样子如图,这样展现就在 "上传图片" 这个 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);
- };
细节决定成败,所以做任何事情都要认真对待。
来源: http://www.phperz.com/article/17/0405/266258.html