HTML5 Study Notes (2): Attributes of input type file

One, input type=file and file upload

This article refers to theinput type=filetypetype isfiletheinputelement, the simplest HTML code is as follows:

<input type=file>

But, in order to get used to it, we write more:

<input type= "File" >

Before the advent of HTML5 (XHTML), our closure rules were somewhat out of the loop:

<input type= "File"/>

As the name implies, select the file and upload the file.

The nativefileinputform element only lets us upload one picture at a time before HTML5 has yet to appear. Can not meet the need to upload multi-graph interactive, so, many scenes, is replaced by Swfupload.js.

However, technological development is changing rapidly. With the native HTML5 form to multi-map (multipleattributes), pre-upload preview, binary uploads and other support more and more widely, the originalfileinputform elements ushered in a new upgrade, Flash for the background of the swfupload.js doomed to be lonely.

However, for PC projects, the Ie8-ie9 browser cannot be ignored. So, now, a very popular way of processing, is HTML5 file upload and flash swfupload upload together with the mode of integration, priority to use native HTML5 upload, unsupported, using flash upload.

Ii. native input upload and form form elements

If you want to use browser-native features to achieve file upload (slice) effect, the parentformelement has something can not be lost, that is:

Enctype= "Multipart/form-data"

enctypeproperty specifies how the form data should be encoded before being sent to the server, and the default encoding is: "application/x-www-form-urlencoded". For the normal data is quite applicable, but, for the file, Koko, can not be random code, what is what, can only be usedmultipart/form-dataas theenctypeattribute value.

This is true, whether it's an old-fashioned single-image upload or a multi-image upload in HTML5.

Third, the original file input image pre-upload preview and Ajax upload

Files, especially pictures, can be previewed before playing, which is a great interactive experience. No server, no traffic, how great!

Ideals, though good, come true.

In the old days before the HTML5, only the low version of IE browser seems to have the method, the use of private filters, beyond the security restrictions (in fact, the use of bad things), to achieve a direct preview of the picture; but, at that time, Chrome, Firefox did not have this function, so, To use the native file input to implement a pre-upload preview of the picture, the compatibility threshold is difficult to cross over.

However, later, HTML5 came, we have a turnaround, ie10+ and other modern browsers, you can let us directly read the image of the data, and then presented on the page, to achieve the pre-upload preview, plus the previous old IE filter strategy, seemingly, feasible. But, but, the old IE browser can only select a file at most once, so you can think about it only when you upload it in a single image.

The traditional form submission, is to change the page flow, that is, after the refresh jump. A good experience should be an AJAX interaction. HTML5 supports binary Formdata data submission, so it is easy to submit the uploaded file data with Ajax; What about the old IE browser?

The general method is as follows:

1. The form element addstargeta new property whose value points to a hidden element within the page<iframe>id, as shown below:

   <form action= "" method= "Post" enctype= "Multipart/form-data" target= "Uploadiframe" ><<iframe id= " Uploadiframe "></iframe>  

2. Handle the<iframe>event of the elementonload, get the return content (as shown in the code below), the specifics are not the focus of this article, not the table.

   var doc = iframe.contentdocument? Iframe.contentdocument:frames[iframe.id].document;var response = Doc.body && Doc.body.innerHTML;

OK, of course, you can also use jquery.form.js directly without the hassle of being above.

Four, native file input size, button text, such as UI customization

Another reason for the native file input not to be seen is that the long ugly is not well controlled.

For example, this "select File" of the text, we are not good for the file control knife implementation of custom:

What do we do?

There is one way to do this:
Let the element transparency of the file type0be overlaid on our nice-looking button. Then we go to click on the Nice button and actually click Yes to thefileelement.

However, this approach has some disadvantages:

1. Size control is not flexible. CSSwidthProperties Some browsers do not work, need to be usedsize, and then the height control is not accurate, it is difficult for us to just cover the beautiful custom button.
2. The style is not well controlled, the state of the buttonhoverand theactivestate is not good.
3. HTML structure Limitations and location costs.

A better approach is to uselabelelements tofileassociate with controls, with the benefit of:

1. Click on the Custom Beautiful button is to click on our file control;
2. No problem of size control imprecise;
3. There is no problem that can not respond to hover state active state;
4. Our pretty buttons can even be on the outside of form elements, such as:

   <label class= "Ui_button ui_button_primary" for= "XFile" > Upload file </label><form><input type= "file" id = "XFile" style= "position:absolute;clip:rect (0 0 0 0);" ></form>

   
   

V. The Accept property of the file type control

The input file type control has a property namedaccept, and some small partners may not know it very well. Can be used to specify the type of file that the browser accepts, that is, the file type that is rendered in the default interface when we open the system's Select File Bullet box. For exampleaccept="image/jpeg", there are only JPG images in the interface, such as the following, and at the bottom right of the form is the custom files button:

In the actual development time, very few only allow to transmit JPG pictures, should all be only to pass the picture type, at this time, can use:

accept= "image/*"

Thus, the customization file button becomes a more semantic "picture file":

acceptProperty values are actually MIME types, such as the following may be commonly used:

accept="application/pdf"
accept="audio/x-mpeg"
accept="text/html"
.accept="video/x-mpeg2"

Then, multiple attribute values are separated by commas, for example:

<input accept= "audio/*,video/*,image/*" >

Vi. purging of input file values

Modern browser directlyvalue = "", some IE browser seemingly not, as if usingfile.outerHTML = file.outerHTML, I did not test.

But I feel more trouble, but also to judge the browser or something. Like this article of the Ajax single-image upload, directlyform.reset()can be.

HTML5 Learning Note (2): attribute of input type file