Comment: Recently, I was using the file upload control and found two compatibility issues of the file upload control: one is that the file upload control cannot change width through CSS under Firefox, and the other is that the file upload control looks and behaves differently under different browsers. This article will provide a detailed solution.
Recently, I used the file upload control when using canvas to process image pixels, and found two compatibility issues with the file upload control. One is that the file upload control cannot change width through CSS under Firefox, and the other is that the file upload control looks and behaves differently in different browsers.Below is a screenshot of the file upload control in IE10, firefox16, chrome22, opera12, safari5.1.7:
In IE10, double-click the input box or click the button to pop up the file selection box. Clicking the input box, button or text in other browsers can trigger the file selection box.
Given this confusion, it is necessary to unify the same and behavior. Here is my compatibility solution.
Let’s first look at the screenshots of the final result in each browser:
Basic idea: Create input boxes and buttons to simulate file upload controls. Set the file upload control to transparent. Make the file upload control right-align with the button used for simulation. Modify the stacking order of elements, so that the buttons are below, the file upload control is in the middle, and the input box is above. After the file selection is completed, assign the value in the file upload control to the input box used for simulation.
Principle: In different browsers, the height of the button of the file upload control is adjustable, and the right side of the file upload control can be clicked. So by adjusting the height of the file upload control and adjusting the position of the file upload control (right-aligned), the clickable area of the file upload control can be completely overwritten with the buttons used for simulation. When the file upload control is transparent, the user clicks the button for simulation triggers the file selection box. But at the same time, the stacking order of file upload controls cannot be preceded by the input box used for simulation. Otherwise, when the user places the mouse on the input box seen, you may see that the cursor is not indicating text but an arrow (and when clicking it as an arrow, the file selection box will pop up), and the user will be confused.
Implementation: Let’s take a look at the code in the html part first.
<div>
<input type="text" value="file not selected" /><input type="button" value="browse" /><input type="file" />
</div>
Then there is the code for the css part.
#file {
position:relative;
width:226px;
height:25px;
border:1px #99f solid;
}
#file input {
font-size:16px;
margin:0;
padding:0;
position:relative;
vertical-align:middle;
outline:none;
}
#file input[type="text"] {
border:3px none;
width:172px;
z-index:4;
}
#file input[type="button"] {
width:54px;
height:25px;
z-index:2;
}
#file input[type="file"] {
position:absolute;
right:0px;
height:25px;
opacity:0;
z-index:3;
}
Finally, the javascript part is used to display the file path obtained by the file upload control into the visible input box.
window.onload=function(){
var file=document.querySelector("#file input[type='file']");
var text=document.querySelector("#file input[type='text']");
file.addEventListener("change",assign,false);
function assign(){
text.value=file.value;
}
}
Welcome to leave a message for communication or correction.