Upload File Control

We will encounter this situation when writing pages, and we need to upload files. Generally, <input type = "file"/> is used for processing.

But he has a small problem. Let's take a look.

Different browsers have different styles.

IE8: there is a text box in front of the button to display the file path.

Chrome: The file upload status is displayed after the button. The default statement is slightly different.

Firefox: similar to chrome.

Different browsers have different styles, so we cannot set them based on a stable style. When we set width and height, different parts will be overwritten.

Solution 1:Hide <input>, place a button in the original place, and manually trigger the <input> click event in the Click Event of the button.

Solution 2:Put a fake button under it, set the width and height of <input type = "file"/> to the same as that of the fake button, and set the transparency to 0, and locate the false button in the absolute layout. In this way, we can see that we press the false button and click the above <input>

Next, let's take a look at these two solutions:

HTML:

<div class="inputBox">    <input class="btnInput" type="button" />    <input class="fileInput" type="file" /></div>

 

Solution 1:Hide <input>, place a button in the original place, and manually trigger the <input> click event in the Click Event of the button.

CSS:

. Inputbox {width: 500px; Height: 500px ;}. btninput {display: block; width: 100px; Height: 30px;/* button style */}. fileinput {display: none ;}

JS, manual event Transfer

1 $(‘.btnInput‘).click(function(){ 2     $(‘.fileInput‘).trigger("click"); 3 });

Then we run the code and find that the file selector window is displayed when you click the button.

We usually perform Form Verification and submission in onchange of <input type = "file"/>.

However, this may cause a problem: IE may not necessarily receive the onchange event. Let's give it a try:

Add the following JS Code

1 $(‘body‘).on("change", ‘.fileInput‘, function(){2    alert("change event");        3 });

There is no problem in chrome when we first upload a file or change the file, but the onchange event is not triggered in IE 8.

We change the following structure

<input class="fileInput" type="file" onchange=“fchange();” />

window.fchange = function(){    alert("change event"); 
}

Onchange In the tag will find the function in the window. If your event processing function is not in the window, you need to bind it. In this case, a prompt box will pop up. However, if the function body references a large number of sub-scope variables and the function is bound to the window, the memory will be released. So we try not to use this method.

However, we need to understand why the event cannot be received in IE, because some versions in IE think that onchange can be triggered only when there is a focus exit, and the focus of the event we manually convert is always on the button. Therefore, in order to seek insurance, the input should be clicked.

 

Solution 2:First, place a fake button under the bottom, and locate the Fake button in the absolute layout. In this way, we can see that we press the false button and click the above <input>

1. inputbox {2 position: relative; 3} 4 5. btninput {6/* button style */7} 8 9. fileinput {10 position: absolute; 11/* the same height as the button */12 opacity: 0; 13 filter: alpha (opacity = 0 ); // ie14/* adjust top left to the button position or use js to calculate */
Z-Index: A little higher
15}

So there is no problem.