A brief record of some codes that are uploading H5 this morning and there are still pitfalls
1. Display
Because the front-end upload file must be passed through the form form, and ajax cannot be used. In this way, it is really not good to put an input with type file on a mobile page. As shown in the figure below, is it very frustrating?
After finding the solution, some PCs replaced this input with flash, using jquery tool library such as uploadify, but most mobile browsers 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 are in a div with the content being prepared to be displayed, and the content displayed can be made as 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> <img src="img/1.jpg" /> </div> <div> <p> Upload image</p> <form> <input type="file" /> </form> </div> </body></html>The appearance is as shown in the picture, so it is displayed in the p-tag "Upload Picture". Clicking it will give you the effect of selecting the file
2. JS code
I wrote it quite simple, just using the basic functions of h5 upload
The html code is as follows, action is the path to request. What I am doing here is to upload and modify the avatar when the file changes. The name attribute of the input tag cannot be omitted, it is related to the backend 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; //2Mwindow.fileSelected = function() { var oFile = document.getElementById('imageFile').files[0]; //Read the file var rFilter = /^(image//bmp|image//gif|image//jpeg|image//png|image//tiff)$/i; if (!rFilter.test(oFile.type)) { alert("File format must be an image"); return; } if (oFile.size > iMaxFilesize) { alert("The image size cannot exceed 2M"); return; } var vFD = new FormData(document.getElementById('uploadForm')), //Create request and data oXHR = new XMLHttpRequest(); oXHR.addEventListener('load', function(resUpload) { //Success}, false); oXHR.addEventListener('error', function() { //Failed}, false); oXHR.addEventListener('abort', function() { //Upload interrupt}, false); oXHR.open('POST', actionUrl); oXHR.send(vFD);};Details determine success or failure, so you must take everything seriously.
The above is all about this article, I hope it will be helpful to everyone's learning.