You can overlay a textbox over the browse button and then associate a click event with this textbox so that whenever the user clicks on the textbox, the click() of the "Browse" button gets triggered.
Here are the steps that you need to follow:
Create a custom button :
<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="选择文件" class="OverlayButton btn" />
Please note that the class of this button "btn" give it the standard salesforce button behaviour (on hover pointer change, on click blue border etc)
- Note that there is an additional class "Overlay" associated with the input.
Basically you need to put the input text and apex:inputfile in a div container
(start tag below is --> div class = "ChooseFileContainer")
<code>
<div>
<apex:inputFile fileName="CustomObjectList" value="{!filebody}" fileSize="{!filesize}" style="padding-left:65px" />
<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="Upload Object Names File" class="OverlayButton btn" />
</div>
</code>
Then you need to apply the styling which would overlay the text box over the standard button. Please note that you may have to adjust these parameters for your application:
<style>
/* Styling for the standard button */
.ChooseFileContainer {
position:relative;
display:inline;
}
/*Styling for the custom button that would overlay on top of the standard choose file button */
.OverlayButton {
position:absolute;
left:5px;
right:0;
}
</style>
Finally, you write the javascript that would trigger the click() on the standard button when you textbox is clicked.
$(function(){
// script that triggers the click of the standard
// choose file button
$('#CustomChooseFileButton').click(
function(e) {
$('input[type="file"]').click();
});
// script to hide the blinking cursor
$('input[type="text"]').mousedown(
function(e) {
e.preventDefault();
$(this).blur();
return false;
});
});
Note that we also added an event that would get rid of the blinking cursor on the textbox.
Let me know if you face any issues in implementing this solution.
