Automatically submitting a form when an upload file is chosen - javascript

I have a HTML page with the following input tag:
...
<input type="file" id="browseContactImageButton" />
...
Clicking the button on the page results in Open File Dialog. If I want to do the actual uploading, I need another button to click (submit), because this input file button is used just to provide the path to the file.
Is it possible to click the browse button, select the file and to start the uploading function immediately after the file has been chosen? If yes, could anyone provide the code snippet? Thanks.

If you want the form to submit after the user has made their selection, then simply add
<input type="file" onchange="this.form.submit();" ..... >

I had the same requirement.
I figured out to use onchange event of fileupload control to fire c# method.
But I'm getting FileUpload1.HasFile property always 'False' and file name was not set yet.
My markup:
<asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode="AutoID"
ViewStateMode="Enabled" onchange="UploadImage();"/>
any suggessions?

Related

File Upload Issue in HTML

Once I upload a file through input type, it then gets disabled, can't upload another file until the page is refreshed. I don't want to upload multiple files at once, but one after the other. Then click on submit.
My code:
<i class="fa fa-video-camera"></i>
<span>
<input type="file" id="video-dancing" name="postVideo" accept="video/*">
</span>
https://daveismyname.com/upload-multiple-files-with-a-single-input-with-html-5-and-php-bp
hope this would help your problem .
Once the first upload is complete, simply add code to refresh the page.
use attribute multiple to select multiple files.
<input type="file" id="video-dancing" name="postVideo" accept="video/*" multiple >

How to prevent form submit when choosing a file with <input type="file>?

I have a file input on my page:
<input type="file" id="file-main" style="display:none;" name="file-main">
And I have a lable pointing to that input:
<button class="main-button" id="file-choose-btn"><lable for="file-main">Choose Image</lable></button>
But when I press the button (to choose the file), the form immediately gets submitted, and tries to execute the PHP file (that's in the form's "action").
I do not yet have that file, so it returns a HTTP 404 error.
Basically, my question is, how do I prevent the form from being executed after clicking the (or a button in this case).
I've tried using an event handler that prevents the default action of the event:
document.getElementById("file-choose-btn").onclick = function(e){
e.preventDefault();
}
But then I cannot even choose the file, since the window doesn't even open.
Any solutions? Thanks.
Make button type button so it will not submit a form:
<button type="button" class="main-button" id="file-choose-btn">
<lable for="file-main">Choose Image</lable>
</button>
By default button has type submit so hence the behaviour you get.

To change the default text "No File Selected" of a browser button with some other text in JSP

I have a file browser button in my jsp. It has a text like "No File Selected" beside it at the very beginning. after selecting the file, it shows the file path instead of "No File Selected". Now I want to replace "No File Selected" with ".jpg" or the supported format names.
Is it possible to do so?
my code for the browser button..
<form:input name="file1" type="file" accept="image/png,image/jpeg"
id="files" path="" size="500" title="files" />
Use this style...
in order for you to make a design of you input file..
do not display the input.. just hide it and make a design on your button or whatever element you want. Just like my example below..
<input type="file" id="myUpload" style="display:none" />
<button type="button" onclick="javascript:document.getElementById('myUpload').click();">Upload Photo</button>
I hid the input while displaying the button and giving it an attribute onclick and letting the javascript do the magic..
here is the example:
http://jsfiddle.net/aYd72/
and better use bootstrap for better designs
I hope it will help you

Upload File - Customizing Html

How can I do to browse my files when i click in a button "Upload" ?
I need to create a hidden file input?
More Explain:
I can't edit css of input type file of my html forms. So in each browser I have a different layout. I don't want it. I want to customize my form.
I created a button. When I click on the button, I want to appear the file selection screen.
When I select the file and press ok , I want to put the path string of my file in the input that I created.
Could you provide more information? You need to use the file html form element.
The file element lets you browse your local documents naturally.
To process the file attachment you need to know a programming language like php
I solved my problem with this code:
<div class="input-append">
<label for="showpath">File Upload:</label>
<input id="showpath" type="text" onclick ="javascript:document.getElementById('CommentFile').click();"/>
<button type="button" onclick ="javascript:document.getElementById('CommentFile').click();"></button>
<input type="file" name="data[Comment][file]" id="CommentFile" style='visibility: hidden;' onchange="updateInput(this.value,'showpath')"/>
</div>
<input type='file' />
More info at w3schools.

File upload with the file control hidden

I havea form with a file input which is hidden. There will be abutton on click of which,
the open file dialogue should pop up and when we select the file, the file should get uploaded to the server. Is this possible ?
If you set the display to none, it won't work in webkit browsers. But you can set the opacity, width and height to zero, and then call the click event when the other button is clicked.
Here is a working example http://jsfiddle.net/jcVL5/
***Edit: I just saw "the file should get uploaded to the server". You will have to explain what server side language you are using.
<input type="file" id="fileUpload" style="opacity:0; height:0px;width:0px;" />
<input type="button" id="btnUpload" value="test Button" />​
<script>
document.getElementById('btnUpload').onclick = function(){
document.getElementById('fileUpload').click();
};​
</script>
Have you tried using Fine Uploader? You can see the demo site here http://fineuploader.com if this is what you need.

Categories