Pay attention to details when implementing simple upload with html5+javascript

Pay attention to details when implementing simple upload with html5+javascript_javascript skills

WBOY

Release： 2016-05-16 15:04:53

Original

2286 people have browsed it

Briefly record some pitfalls in some codes when doing H5 upload this morning

1. Display

Because the front-end uploading files must go through the form, and ajax cannot be used. In this case, putting an input of type file into a mobile page really doesn’t look very good, as shown below, it’s very frustrating, isn’t it?

I looked for a solution. Some people on PC replace this input with flash and use jquery tool library such as uploadify to do it. However, most browsers on the mobile side do not support flash. So the final method is to use the form form, just set the transparency of the form and input to 0, so that they and the content to be displayed are in a div at the same time, and the displayed content can be made to look like you want. The code is as follows:

<!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>

Copy after login

As shown in the picture, it will be displayed in the p tag of "Upload Image". Clicking it will have the effect of selecting the file

2. JS code

What I wrote here is quite simple, I just used the basic functions of h5 upload

The html code is as follows. Action is the path to be requested. What I do here is upload and modify the avatar when the file changes. The name attribute of the input tag cannot be omitted. It is specifically related to the back-end interface

<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">
  <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />
</form>

Copy after login

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);
};

Copy after login

Details determine success or failure, so take everything seriously.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.