JavaScriptCSS modification learning Chapter 5 add a style to "Upload" _ basic knowledge

In all form items, the file upload part is the most difficult to add styles. IE supports some (not many) style attributes, few Mozilla, and few other browsers. The "Browse" button is also difficult to access in CSS operations. 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 commonAnd then placed in the element that contains the postion: relative attribute.

2. Add a commonAnd an image. Set an absolute position for the normal inputOverlap.

3.Set z-index to 2, so that it can be displayed on a common input.

4. FinallyOpacity of is set to 0. This wayThe following input/image is displayed, but you can click "Browse. 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 the user selects a file, the visible false input box should display the path of the selected file, just like the normalSame. Although you only needBut JavaScript is still needed.

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:

The Code is as follows:

P. fileinputs {
Position: relative;
}

P. 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;
}

The location is relative, so that we can place an absolute layer in it: a false input box.

Contains a false input box and a button. Its position is absolute and the z-index value is 1, so that it can be displayed under 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:

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:

The Code is as follows:

We use JavaScript to add other elements.
Code

The Code is as follows:

Var W3CDOM = (document. createElement & document. getElementsByTagName );
Function initFileUploads (){
If (! W3CDOM) return;
Var fakeFileUpload = document. createElement ('P ');
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 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.

The Code is as follows:

Var W3CDOM = (document. createElement & document. getElementsByTagName );
Function initFileUploads (){
If (! W3CDOM) return;

Create

And other contents. We will copy it as needed.

The Code is as follows:

Var fakeFileUpload = document. createElement ('P ');
FakeFileUpload. className = 'fakefile ';
FakeFileUpload. appendChild (document. createElement ('input '));
Var image = document. createElement ('img ');
Image. src = 'pix/button_select.gif ';
FakeFileUpload. appendChild (image );

Then traverse all the inputs on the page. Ignore.

The Code is as follows:

Var x = document. getElementsByTagName ('input ');
For (var I = 0; I If (x [I]. type! = 'File') continue;

Perform another check: If If the parent element of does not have the class of fileinputs, ignore it.

The 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.

The Code is as follows:

X [I]. className = 'file den ';

Copy the false input box and add .

The 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 pointing to a false input box:

The 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)

The Code is as follows:

X [I]. onchange = x [I]. onmouseout = function (){
This. relatedElement. value = this. value; 3}

Problems and extensions
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.
Therefore, we hope that you can modify the real upload path through the fake 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}
However, JavaScript Security does not allow the program to modify the upload path, so we cannot modify the real upload path by asking the user to modify the content of 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 the 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 Event path
Some readers suggest removing the complicated CSS, hiding the upload box completely, and binding the click Event of the fake 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.
Http://www.quirksmode.org/dom/inputfile.html
Reprinted please keep the following information
Author: Beiyu (tw: @ rehawk)