Change the button of the upload control to an image.

Although the control can be added with a CSS style, it still cannot change the browsing button to an image. After trying to hide the control and then trigger the click event with an image button, it looks quite different, however, the content will be cleared at the time of submission. In the past, this control had a security mechanism problem. In addition to clicking its Browse button, it cannot be assigned a value in other ways.

I tried a lot of solutions and finally found a usable one. After modification and improvement, I finally reduced the bug to a minimum. The principle is that when you move the mouse over the image button, JS is triggered, and the upload control is quietly moved to the bottom of the mouse. When you click this button, the browser button of the control is clicked.

The Code is as follows:

JS:

Function movemou ()

{
F = Document. getelementbyid (fileupload0 );
F. style. pixelleft = (event. offsetX-15 );
F. style. pixeltop = event. y ++ 495;

}

Page: 'onmousemove =" movemou () "/>

<Table Style = "position: absolute; top:-500px; "> <tr> <TD id =" att1 "> <input type =" file "name =" fileupload0 "id =" fileupload0 "style =" position: absolute; font-size: 1px; width: 10px; filter: alpha (opacity = 0); cursor: pointer; "hidefocus onchange = 'addfile () 'size = '10'/> </TD> </tr> </table>

Code explanation: the position of the table is to ensure that the input control is not within the screen range during initialization, so that no one will miss the filter: alpha (opacity = 0 ); is to make the control transparent (these two points can be removed first ). The position of pixelleft and pixeltop needs to be adjusted based on the actual situation, and the following parameters will be changed to different pages. Because I am writing a multi-attachment upload control, I have not found the problem of changing the page location. Font-size: 1px; width: 10px; and size = '10' are used to modify the control size. The probability of a false point is increased. To reduce the number of bugs.

In subsequent applications, after the master page is changed to the frame page, the control fails to be clicked. Later, it was found that the ordinate coordinates were faulty. After improvement, the current code can adapt to these two situations. The Code is as follows:

Function overmou (this)
{
Fn = uploadname + uploadnum;
F = getattachelement (FN );
F. style. pixelleft = (event. offsetX-15 );
Objp = this;
Alltop = 0;
While (objp! = NULL)
{
Alltop + = objp. offsettop;
Objp = objp. offsetparent;
}
F. style. pixeltop = alltop + event. offsety + 495;

}

Parameters following the event:

Clientx
Retrieves the X coordinates of the mouse cursor related to the client area of the window. The attribute is read-only and there is no default value.
Clienty
Retrieves the Y coordinate of the mouse cursor related to the client area of the window. The attribute is read-only and there is no default value.
Ctrlkey
Ctrlkey: retrieves the current status of the ctrl key
The possible value true is disabled.
False indicates not to close
Dataworks
Retrieve the columns affected by oncellchange
Atransfer
Provides a pre-defined clipboard format for drag-and-drop operations.
Element
Retrieve the object pointer that exits during onmouseover and onmouseout events
Keycode
Set or retrieve the Unicode keyword code associated with the keyword that triggers the event
This attribute is used with onkeydown onkeyup onkeypress.
If no keyword is triggered, the value is 0.
Offsetx
Retrieve the horizontal coordinates of the mouse position related to the object that triggered the event
Offsety
Retrieve the vertical coordinates of the mouse position related to the object that triggered the event
Propertyname
Retrieve the name of the feature that has been changed on the object
Reason
Retrieve the data transfer results of the data source object
Possible values:
0 data transmission successful
1. Data Transmission failed.
2. Data Transmission Error
Recordset
Retrieve the reference of the default record set in the data source object
This feature is read-only.
Repeat
Checks whether an event is repeated.
This attribute returns true only when the onkeydown event is repeated.
Returnvalue
Set or retrieve the value returned from the event
Possible values:
The value in the true event is returned.
False: the default operation of events on the source object is canceled.
Screenx
Retrieve the horizontal positions of the mouse related to the User Screen
Screeny
Retrieve the vertical positions of the mouse related to the User Screen
Shiftkey
Retrieves the current status of the shiftkey.
The possible value true is disabled.
False indicates not to close
Srcelement
Retrieve the trigger event object
Srcfilter
Retrieve the filter object triggered by the onfilterchange event
Srcum
Retrieve the same resource name that triggers event Behavior
This feature is set to null unless both of the following conditions are true.
1. The action is appended to the element of the trigger event.
2. The behavior defined in the previous project symbol already specifies an urn identifier and triggered event
Toelement
Retrieve the object that is moved as the result of the onmouseover or onmouseout event
Type
Retrieve the event name in the event object
X
Returns an integer relative to the horizontal coordinate of the cursor of the parent element.
Y
Returns an integer relative to the vertical coordinate of the parent element.