Use transparency effects to customize the file upload button control style_javascript skills

<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> <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>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh it to execute

]

1. In the older version When uploading images in browsers (such as IE9 and below, which do not support fileAPI, do not support XMLHttprequest level2 and can only use form post files), you can only use form post. For security reasons, input[type="file"] files The selection button style cannot be modified at will (but the transparency of the input can be modified), which may be incompatible with the designer's design. In this case, you can use the transparency effect to customize the upload button.
2. It is best not to exceed 60px in width of the control, because the width of the file control browsing button cannot be modified, it is about 60px in Firefox. If it exceeds 60px, do not set the mouse style of the control. Since the mouse style of the file control under Firefox only takes effect on the browse button, setting the mouse style will cause the left and right styles of the control to be inconsistent.
3. The row height of the control text display layer should be consistent with the height of the control container layer to ensure that the text is vertically centered.
4. Due to security issues, the file upload control must use the mouse to click the browse button to pop up the file selection window and select the file before uploading files to the server (file API is not supported). The click() event of the file control is triggered through js. You cannot upload a file by popping up the file selection window and then selecting the file. Therefore, you must make the file control cover the text display layer and set the file control style to transparent to display the text layer below.
5. The xmlhttprequest component (level1, level 2 already supports binary data upload and cross-domain) cannot upload files. To upload files asynchronously, you need to use iframe. Introduce the upload control and use form post data. You can put the file upload function separately in the iframe. It can be implemented within the system, or you can just specify the server script that handles image uploading to be opened in the iframe (set the target of the form to point to the iframe window).

Copy code

The code is as follows:<script> document.getElementById("ui-upload-input").onchange=function(){ document.getElementById("ui-upload-filepathtxt").value = this.value; } </script>

上传

<script> <br>document.getElementById("ui-upload-input").onchange=function(){ <br>document.getElementById("ui-upload-filepathtxt").value = this.value; <br>} <br></script>