简单记录下今早做H5上传中一些代码还有坑

一、展示

因为前端上传文件是必须通过形式表单的，不能使用ajax，这样的话一个移动页面放入一个类型为文件的投入真心不怎么好看，如下图，很挫有没有

解决办法找了下电脑上有些是把这个投入换成闪光，采用框架的工具库比如上传来做，但是移动端大部分浏览器是不支持闪光的。所以最后采用的办法还是用形式表单的形式，只是把这个形式和投入的透明度设置为0,让它们和准备显示的内容同时在一个差异中，显示的内容可以做成自己想要的样子。代码如下：

！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%；} .徽标img { display : block margin :0 auto }。上传{位置：相对；宽度： 80px高度： 18px线高： 18px背景技术： # 2fc 7 c 9；文本对齐：中心；颜色： # FFF；padd : 0px 5px-web套件-边框-半径： 2px边界半径： 2pxmargin: 0 auto}。上传表单{宽度：100%；位置：绝对；left :0 top :0 opa city 33600 filter : alpha(不透明度=0);} .上传表单输入{宽度： 100%；}/style/head body div class=' logo ' img src=' http : img/1。jpg '/div div class=' upload ' p上传图片/p表单输入类型=' file '/form/div/body/html(9501 . 163.com)

样子如图，这样展现就在"上传图片"这个p标签中，点击它就有选择文件的效果

二、JS代码

我这边写的蛮简单的，只是用了下h5上传的的基本功能

超文本标记语言代码如下，行动为要请求的路径，我这边做的是当文件发生改变时就上传修改头像，输入标签的名字属性不能省去，具体跟后端接口有关

表单id=' uploadForm ' enctype=' multipart/form-data '方法='post '操作='XXXXXX '输入类型=' file ' name=' imageFile ' id=' imageFile ' on change=' files selected()'//formvar iMaxFilesize=2097152；//2窗口。选择的文件=function(){ var oFile=document。getelementbyid(' imageFile ').文件[0];//读取文件var r滤波器=/^(image/bmp|image/gif|image/jpeg|image/png|image/tiff)$/i；if(！过滤器。测试(ofile。类型){ alert('文件格式必须为图片');返回；} if(ofile。大小iMaxFilesize){ alert('图片大小不能超过2M ')；返回；} var vFD=new FormData(文档。getelementbyid(' uploadForm ')，//建立请求和数据oXHR=new XMLHttpRequest()；oXHR.addEventListener('load ')，函数(resUpload) { //成功}，false)；oXHR.addEventListener('error '，function() { //失败}，false)；oXHR.addEventListener('abort '，function() { //上传中断}，false)；oXHR.open('POST '，动作URL)；奥克斯。发送(VfD)；};细节决定成败，所以做任何事情都要认真对待。

以上就是本文的全部内容，希望对大家的学习有所帮助。