Home > Article > Web Front-end > Pay attention to details when implementing simple upload with html5+javascript_javascript skills

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

WBOYOriginal: 2016-05-16 15:04:532288browse

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>

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>

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

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of browser compatibility issues in JavaScript_javascript skillsNext article：A brief analysis of browser compatibility issues in JavaScript_javascript skills

See more

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

Related articles