Add a style for "Upload" in Chapter 5 of JavaScript CSS modification Learning

ArticleDirectory

• Netscape 4 Problems
• Ie4 Problems
• Netscape 3 Problems
• Solution-Javascript

Problem
In a website, my input box may be as follows:

The designer may want to make the upload part look like this and then add a select button. However, when I want to change a normal input box to an upload box, it will not work at all. There are many differences between browsers, and it is almost impossible to add styles to the default buttons.

This is difficult to become a well-designed upload box, but it is also the most we can do.

Note that safari is designed differently. The safari team may worry about this overflow if they want to disable the manual file input function. The disadvantage of this design is that you cannot cancel uploading a file after selecting a file.

Solution

Reader Michael McGrady invented a good tips to solve the problem of adding styles to the upload button. He invented all the solutions on this page. I just added position: relative, some comments and tests, and then converted them into JavaScript.

When this technique is not used:

After using it, I want to be like this:

It looks better now, doesn't it?

The McGrady method is simple and elegant:

1. Set a common<Input type = "file">And then placed in the element that contains the postion: relative attribute.

2. Add a common <input> and an image to the parent element and set the style for them. Set an absolute position for the input to overlap with <input type = "file">.

3. Set the Z-index of <input type = "file"> to 2 so that it can be displayed on a common input.

4. Finally, set the opacity of <input type = "file"> to 0. In this way, the <input type = "file"> is invisible, and the following input/image is displayed, but you can click the "Browse" button. If the button is located on the image, it seems that the image is clicked.

Note that you cannot use visibility: hidden, because a truly invisible element cannot be clicked. We need an invisible element that can be clicked.

So far, this effect can be displayed through pure CSS, but it is still a little worse

5. After you select a file, the visible false input box should display the path of the selected file, just like the normal <input type = "file">. Although you only need to simply copy the content of <input type = "file">, you still need JavaScript.

Therefore, this technology may not be fully implemented without JavaScript. I will explain the reason later. I decided to write the entire idea into JavaScript. If you want to use an upload box without a file name, you can also use the pure CSS method, although this is not a good method.

Html/CSS Structure
I plan to use the following html/CSS structure:

CopyCode The Code is as follows: div. fileinputs {
Position: relative;
}

Div. fakefile {
Position: absolute;
Top: 0px;
Left: 0px;
Z-index: 1;
}

Input. File {
Position: relative;
Text-align: right;
-Moz-opacity: 0;
Filter: alpha (opacity: 0 );
Opacity: 0;
Z-index: 2;
}

<Div class = "fileinputs">
<Input type = "file" class = "file"/>
<Div class = "fakefile">
<Input/>

</Div>
</Div>

<Div class = "fileinputs"> The position is relative, so that we can place an absolute layer in it: a false input box.

<Div class = "fakefile"> contains a false input box and a button. Its position is absolute, and the Z-index value is 1, in this way, it will be displayed in the real upload box.

The real upload box also has the location attribute relavtive, so that you can set its Z-index value. In short, the upload box must be displayed on a false input box. Then we set the transparency to 0 to make it invisible.

Note that text-align: Right: Because Mozilla cannot set the width of the upload box, make sure that the Browse button is on the right edge of the DIV and the fake button is on the right, and it should be true.

You also need some CSS code to set the width and height of the border and so on. In this example, I did not write it.

Why JavaScript?
The first reason for using JavaScript is to copy the file path to a fake text box.

Second, JavaScript ignores meaningless HTML code: <Div class = "fakefile"> to keep the code clean.

Finally, for some old browsers that cannot process CSS, file input in Netscape and ie4 is not accessible. For Browsers without CSS, users will see two input boxes and cannot understand what the second one is.

Netscape 4 Problems

In Netscape 4, you can only see the button. It may be because of position: absolute.

Ie4 Problems

In ie4, there will be a strange "Browse" button shadow, and you cannot click it. No solution

Netscape 3 Problems

For browsers that do not have the CSS function. Although it can be used, two input boxes will make the user depressed.

Solution-Javascript

The solution to these problems is javascript: generate input boxes and buttons through JavaScript. The worst case is that JavaScript cannot be executed. Even so, users can upload files. Although not so nice, it can still work.

So the complex HTML turns:

Copy code The Code is as follows: <Div class = "fileinputs">
<Input type = "file" class = "file">
</Div>

We use JavaScript to add other elements.
Code Copy code The Code is as follows: var w3cdom = (document. createelement & document. getelementsbytagname );
Function initfileuploads (){
If (! W3cdom) return;
VaR fakefileupload = Document. createelement ('div ');
Fakefileupload. classname = 'fakefile ';
Fakefileupload. appendchild (document. createelement ('input '));
VaR image = Document. createelement ('img ');
Image. src = 'pix/button_select.gif ';
Fakefileupload. appendchild (image );
VaR x = Document. getelementsbytagname ('input ');
For (VAR I = 0; I <X. length; I ++ ){
If (X [I]. type! = 'File') continue;
If (X [I]. parentnode. classname! = 'Fileinputs') continue;
X [I]. classname = 'file den ';
VaR clone = fakefileupload. clonenode (true );
X [I]. parentnode. appendchild (clone );
X [I]. relatedelement = clone. getelementsbytagname ('input') [0];
X [I]. onchange = x [I]. onmouseout = function (){
This. relatedelement. value = This. value;
}
}
}

Explanation
If the browser does not support W3C Dom, do nothing.Copy codeThe Code is as follows: var w3cdom = (document. createelement & document. getelementsbytagname );
Function initfileuploads (){
If (! W3cdom) return;

Create <Div class = "fakefile"> and its content. We will copy it as needed.Copy codeThe Code is as follows: var fakefileupload = Document. createelement ('div ');
Fakefileupload. classname = 'fakefile ';
Fakefileupload. appendchild (document. createelement ('input '));
VaR image = Document. createelement ('img ');
Image. src = 'pix/button_select.gif ';
Fakefileupload. appendchild (image );

The system then traverses all the inputs on the page. If it is not <input type = "file">, it is ignored.Copy codeThe Code is as follows: var x = Document. getelementsbytagname ('input ');
For (VAR I = 0; I <X. length; I ++ ){
If (X [I]. type! = 'File') continue;

Check again: if the parent element of <input type = "file"> does not have a class of fileinputs, ignore it.Copy codeThe Code is as follows: if (X [I]. parentnode. classname! = 'Fileinputs') continue;

Now we have found the upload box for adding styles. First, add a hidden class name.Copy codeThe Code is as follows: X [I]. classname = 'file den ';

Copy the false input box and add it to the parent element of <input type = "file">.Copy codeThe Code is as follows: var clone = fakefileupload. clonenode (true );
X [I]. parentnode. appendchild (clone );

Now we have successfully added the style. But it is not over yet. We want the user to see the file path in the input box.
First, create an attribute for <input type = "file"> to point to a false input box:Copy codeThe Code is as follows: X [I]. relatedelement = clone. getelementsbytagname ('input') [0];

In this way, when the user changes the upload file, we can easily and timely access the false input box, and then copy the path.
There is a problem here. What event do we use? Usually, the change event is used. When the uploaded file changes, the value of the false input box also changes.
However, Mozilla 1.6 does not support this event in the upload box (supported by Firefox ). So I will add an onmouseout event here. (Ie can also run, but safari cannot)Copy codeThe Code is as follows: X [I]. onchange = x [I]. onmouseout = function (){
This. relatedelement. value = This. value; 3}

problem and extension
another problem is that the user cannot cancel a file after selecting it.
assume that the user selects a file and suddenly does not want to upload it. Generally, you only need to delete the file path. However, in our example, it is very difficult. You can try it and delete it, but it is usually the opposite.
we hope that the user can modify the real upload path through modifying the false input box.
it is possible to allow selection. When you select any part of the uploaded file, we select all the contents in the entire false input box.
[Code] X [I]. onselect = function () {2 This. relatedelement. select (); 3}
but JavaScript Security does not allow Programs to modify the upload path, therefore, you cannot modify the upload path by modifying the content in the input box. So I decided to discard the onselect event.
a feasible method is to add a clear button to the fake input box. After a user clicks the button, the original upload box is deleted and a new one is created. This is cumbersome, but it can delete the file path that the user does not want to upload. I don't think this can work, And I didn't write this part of code.
click the event path
some readers suggest removing the complicated CSS to completely hide the upload box, then, bind the Click Event of the false input box to the real upload box. Great idea, and much simpler than above.
[Code] fakefield. onclick = function () {2 realfield. Click () 3}
This click () method allows you to simulate a form item. Click the check box, and select a single region. However, Mozilla and opera do not. I want to know why, because the biggest insecure way to add this method is to bring up a dialog box for selecting files.
therefore, we cannot use this simple method.
author: Beiyu (TW: @ rehawk)