For security reasons, the style of the button selected for the input [type & quot; file & quot;] file cannot be modified at Will (however, the transparency of the input can be modified ), may be incompatible with the designer's design. In this case, you can use the transparent effect to customize the upload button.
<Head> <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> <p class = "uploadlay"> <p id = "ui-upload-filepath"> <input type = "text" id = "ui-upload-filepathtxt" class = "filepathtxt"> </p> <p id = "ui-upload-holder"> <p id = "ui-upload-txt"> upload </p> <input type = "file" id = "ui-upload-input" name = "myfile"> </p> script document. getElementById ("ui-upload-input "). onchange = function () {document. getElementById ("ui-upload-filepathtxt "). value = this. value;} script </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
1. When uploading images in old browsers (such as IE9 or earlier, fileAPI is not supported, and XMLHttprequest level2 can only use form post files), only form post can be used, for security considerations, the style of the button selected for the input [type = "file"] file cannot be modified at Will (however, the transparency of the input can be modified), and may be incompatible with the designer's design, in this case, you can use the transparent effect to customize the upload button.
2. The control width should not exceed 60 PX, because the width of the file control's browser button cannot be modified. It is about 60 Px in firefox. If the size exceeds 60 PX, do not set the mouse style of the control. The mouse style of the file control in firefox takes effect only on the Browse button. If you set the mouse style, the style on the left and right of the control is inconsistent.
3. The Row Height of the control text display layer is the same as that of the control container layer to ensure vertical text center.
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 a file to upload files to the server (file API is not supported ), trigger the click () event of the file control through js to bring up the file selection window and select the file method. Therefore, the file control must be overwritten on the text display layer, set the file control style to transparent to display the following text layer.
5. the xmlhttprequest component (level1 and level 2 support binary data upload and cross-origin) cannot upload files. to upload files asynchronously, you must use iframe to introduce the upload control and use form post data, the file upload function can be implemented independently in iframe, or the server script used to process image uploads can be specified to open in iframe (set the target of the form to the iframe window ).
The Code is as follows:
Upload...
Upload
Script
Document. getElementById ("ui-upload-input"). onchange = function (){
Document. getElementById ("ui-upload-filepathtxt"). value = this. value;
}
Script
