Use transparent effects to customize the control style of the file upload button _ javascript tips-js tutorial

Source: Internet
Author: User
Tags form post
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.