<pead> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <title>upload...</title> <style> #ui-upload-holder{position:relative;width : 60px;height:35px;border:1px solid silver; Overflow:hidden;} #ui-upload-input{position:absolute;top:0px;right:0px;height:100%;cursor:pointer Opacity:0;filter:alpha (opacity : 0); z-index:999;} #ui-upload-txt{Position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;} #ui-upload-filepath{position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left ;} #ui-upload-filepathtxt{position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px;} . uploadlay{margin:200px border:1px Green solid; width:300px; height:200px; padding:10px;} </style> </pead> <body> <div class= "Uploadlay" > <div id= "Ui-upload-filepath" > <input Type= "text" id= "Ui-upload-filepathtxt" class= "FilepatHtxt "> </div> <div id=" Ui-upload-holder "> <div id=" ui-upload-txt "> Upload </div> <input type= "File" id= "Ui-upload-input" name= "myfile" > </div> </div> <script> document.getElementById (" Ui-upload-input "). Onchange=function () {document.getElementById (" Ui-upload-filepathtxt "). Value = This.value; } </script> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
1, in the older browsers (such as IE9 and below, do not support FILEAPI, do not support XMLHttpRequest Level2 can only use the form post file) upload pictures, can only use the form post, security considerations, input[type= "File" The file selection button style cannot be modified at will (although it can modify the transparency of input), may be incompatible with the designer's design, you can use a transparent effect to customize the upload button.
2, the control width is best not more than 60px, because the file control navigation button width can not be modified, under Firefox about 60px. If you exceed 60px, do not set the mouse style of the control, because the mouse style of the file control under Firefox only takes effect on the browse button, if setting the mouse style will cause the left and right styles of the control to be inconsistent.
3. The height of the control text display layer is consistent with that of the control container layer to keep the text centered vertically.
4, due to security issues, file upload control must use the mouse to click the Browse button pop-up file Selection window and select files to upload files to the server (does not support the file API), through JS trigger the file control Click () Event to pop up the file Selection window and then select the file, you cannot upload the file, so you must overwrite it with the text display layer and set the file control style to transparent to display the following text layer.
5, XMLHttpRequest components (Level1, Level 2 already support binary data upload and Cross-domain) is unable to upload files, asynchronous upload files need to use IFRAME to introduce the upload control using form post data, File upload function can be placed in the IFRAME alone, or only the processing of image upload server script specified in the IFRAME open (set the form of target point to the iframe window).
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>upload...</title>
<style>
#ui-upload-holder{position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;}
#ui-upload-input{position:absolute;top:0px;right:0px;height:100%;cursor:pointer Opacity:0;filter:alpha (opacity : 0); z-index:999;}
#ui-upload-txt{Position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;}
#ui-upload-filepath{position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left ;}
#ui-upload-filepathtxt{position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px;}
. uploadlay{margin:200px border:1px Green solid; width:300px; height:200px; padding:10px;}
</style>
<body>
<div class= "Uploadlay" >
<div id= "Ui-upload-filepath" >
<input type= "text" id= "Ui-upload-filepathtxt" class= "Filepathtxt"/>
</div>
<div id= "Ui-upload-holder" >
<div id= "Ui-upload-txt" > Upload </div>
<input type= "File" id= "Ui-upload-input" name= "MyFile"/>
</div>
</div>
<script>
document.getElementById ("Ui-upload-input"). Onchange=function () {
document.getElementById ("Ui-upload-filepathtxt"). Value = This.value;
}
</script>
</body>
