Develop Reference

How to upload files from the same directory as index.html into an element with <input type="file"> by clicking on a button of another element

Edit
Maybe I'll try to break the issue into smaller ones:
How to upload files from the same directory as index.html.
How to upload a file into an element with <input type="file"> by clicking on a button in another element.
How to customize the button from the second issue, which is probably easier once the first two issues are dealt with.
The original question
I'm trying to find a way to upload two files from code-provided paths into two elements with <input type="file"> attributes from a button of another element, so no dialog box for browsing files should be opened.
I couldn't find ways to do that. Maybe the issue phrasing was the reason. Maybe that's impossible. I don't have a lot of experience with HTML.
The files' elements code:
<input type="file" id="file1" name="file1" >
<textarea id="file1_txt" name="file1_txt" rows=8 cols=50></textarea>
<input type="file" id="file2" name="file2" >
<textarea id="file2_txt" name="file2_txt" rows=8 cols=50></textarea>
The other element's button code:
<button type="button" "style="color:red;font-weight:bold;height: 35px;font-size:14">Load example</button>
Thanks!

go to next field automatically html5 form

I am using following html5 form.
<form>
<input type="text" name="orderno" />
<input name="picture" id="img" type="file" accept="image/*" capture="camera" />
<input class="btn-success" type="submit" name="submit" value="Upload" />
</form>
When I open this page in my mobile phone, I want that When I fill first input text, there should be a button called "NEXT" in my keyboard but currently it shows "GO" button directly. Any Help please?
javascript function document.getElementById('img').focus(); is not opening camera automatically.
I want the facility to launch camera on phone automatically when clicked "NEXT" or "GO" in keyboard.

For Security concerns, most browsers do not allow direct access to file uploader or image capture trigger. User has to click on the corresponding field to upload file or capture photograph. you can define focus after each has been addressed.

In first input have tabindex='1' in second input have tabindex='2' and so on.

Cannot click input element within button element

Take a look at the below markup & fiddle:
http://jsfiddle.net/minlare/oh1mg7j6/
<button id="button" type="button">
<span id="test" style="background:pink;">test element</span>
Add File
<input type="file" name="file" multiple="multiple" id="upload">
</button>
In Chrome, each element within the button can be selected through the developer console and js click events are delegated.
In Firefox/IE you cannot select the child elements or pickup js click events.
Is there a way around this in Firefox/IE?

It is not suggested to use elements inside button and so you can use "div" instead of "button" which will make it working both in mozilla and chrome. Check below
<div id="button" type="button">
<span id="test" style="background:pink;">test element</span>
Add File
<input type="file" name="file" multiple="multiple" id="upload">
</div>
http://jsfiddle.net/oh1mg7j6/8/

It's not a good style.Even I can say that this way is not right.you can set "click" event on your button to click the input.so if you want to hide input[file] element,but leave it clickable you can do like I said.Here is a very good link for events docs and examples.
http://www.w3docs.com/learn-javascript/javascript-events.html

click on input box to show open file dialog but not click on choose file button

I have an input box and I want user to click on the input box to show the open file dialog and show the filename in the same input box. But if I use the input type="file", it will show the "choose file button", I dont wan to show the button. How can I do it?
html:
<div class="fileupload">
<input type="file" class="file" name="image" />
</div>
<div class="fileupload">
<input type="file" class="file" name="attachement" />
</div>
http://jsfiddle.net/EctCK/
** I dont wan this, how do I hide the choose file button?

You can overlay a transparent <input type="file"/> over a styled button or other element.
<input type="file" style="opacity:0;"/>
See this JSFiddle for a working demo.

Well there is a little hack for this. You do need to have file upload control on the page. But you can hide it and simulate the file upload control using any other control like div/span/button and style it as you want. Here is a working sample on jsfiddle.
HTML:
<div id="dummy" class="dummyDiv">
<span>click to chose file:</span>
<span id="fileName" class="yellow"></span>
</div>
<div class="wrapper">
<input type="file" id="flupld" />
</div>
JS:
$("#dummy").click(function () {
$("#flupld").click();
});
$("#flupld").change(function () {
//file input control returns the file path as C:\fakepath\<file name>
//on windows, so we remeove it and show only file name.
var file=$(this).val().replace(/C:\\fakepath\\/ig,'');
$("#fileName").text(file);
});

try it:
<input type="file" id="upload" style="display:none">
Upload
Working sample on JSFiddle

Customizing the appearance of a file input in an HTML form

I've been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it's having some strange behavior.
I took my file input and set display:none, and created a new text input and button within the form.
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
<input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(50 characters remaining)</p>
<input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
<input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
<button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
Make my entry private.
<button id="new-entry-save">save</button>
</form>
Then my javascript to handle the ImageFileButton button being clicked:
function HandleFileButtonClick() {
document.getElementById("ImageFile").click();
document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}
It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.
The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.
So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn't submit. You then have to click again to submit, and of course now there is no file.
Anybody know what is happening here?

No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.
Article: Input File
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.