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

互联网 18-5-8

这篇文章主要介绍了HTML5实现简单图片上传所遇到的问题及解决办法的相关资料,需要的朋友可以参考下因为前端上传文件是必须通过form表单的，不能使用ajax，这样的话一个移动页面放入一个type为file的input真心不怎么好看，如下图，很挫有没有

复制代码

代码如下:

  <!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>   p{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>   <p class="logo">   <img src="img/1.jpg" />   </p>   <p class="upload">   <p>上传图片</p>   <form>   <input type="file" />   </form>   </p>   </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);   };

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