Html5 + javascript: Considerations for simple upload _ javascript tips-js tutorial

This article mainly introduces in detail the considerations for using html5 + javascript For upload operations and the form style is not beautiful, interested friends can refer to the simple record below to do H5 upload this morning some code is still pitfall

I. Presentation

Because the front-end upload file must pass the form and cannot use ajax, it is really not nice to put a mobile page into an input with the type of file, for example, is it very frustrating?

After finding the solution, some of the PCs change the input to flash and use jquery tool libraries such as uploadify. However, most mobile Browsers Do not support flash. Therefore, the final method is still in the form of form, just set the transparency of the form and input to 0, so that they and the content to be displayed are in a p at the same time, the displayed content can be as desired. The Code is as follows:

   
   
         
     
  
   
Upload images
     
 

In this way, it is displayed in the "Upload image" p tag. Clicking it will have the effect of selecting file.

Ii. JS Code

I wrote something simple here, but I used the basic functions of h5 upload.

The html code is as follows. action is the Request Path. 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, which is related to the backend interface.

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 ("the file format must be an image"); return;} if (oFile. size> iMaxFilesize) {alert ("the image size cannot exceed 2 MB"); return;} var vFD = new FormData (document. getElementById ('uploadform'), // create a request and data oXHR = new XMLHttpRequest (); oXHR. addEventListener ('load', function (resUpload) {// success}, false); oXHR. addEventListener ('error', function () {// Failed}, false); oXHR. addEventListener ('abort ', function () {// upload interrupted}, false); oXHR. open ('post', actionUrl); oXHR. send (vFD );};

Details determine success or failure. Therefore, you must take everything seriously.

The above is all the content of this article, hoping to help you learn.