...

View Full Version : submitting the form upon file selection



davidklonski
07-01-2004, 02:49 PM
Hello

I have a form with several input tags. One of them is a type=file tag.
I would like the form to be submitted automatically as soon as the user chooses a file.

I tried to change the appearance of the file input but making it invisible, and placing a regular button on top of it. upon the onclick of the button I invoked:"document.myForm.file.click"
This seemed to open the file dialog. will this solution work?
I heard that for security reason, the file input tag cannot be overriden.

Here is a sample of my code:


<form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
<input type="file" id="file" name="file" style="display:none" onchange="this.form.submit()">
<input type="button" value="click to pick a file" onclick="this.form.file.click();">
<input type="text" name="text">
<input type="submit" value="submit">
</form>


The user will have two ways of submitting the form:
* clicking the 'submit' button
* selecting a file using the file selector - this should automatically submit the form.

The problem is the when I choose a file, I get a JavaScript error saying: access is denied.

I would like also to make sure that the user can only select files of a certain extension from the file select dialog. i.e; image/jpeg, image/png, image/gif
Is there a way of setting those extensiosn for the file dialog?
I heard about the accept attribute, but read somewhere that it is ignored by the browser.

thanks

JohnKrutsch
07-01-2004, 05:45 PM
No need to complicate things, this should work fine:

<form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
<input type="file" id="file" name="file" onchange="this.form.submit()">
<input type="submit" value="submit">
</form>

davidklonski
07-01-2004, 05:58 PM
Is there a way to restrict the file types that the user can choose from in the file dialog window?

I can always check the extension of the file after the file gets selected, but I would like to be able to set the valid extensions that the user will be able to pick FROM.

If this is possible

thanks

JohnKrutsch
07-01-2004, 06:01 PM
And for your second question something like this ought to get you thinking about an actual solution to your problem:




<script type="text/javascript">
function check_pic(val,frm){
if(!/[^/].(?:gif|jpeg|jpg|png|bmp)/i.test(val)){
alert("Please select an image with one of the following extentiosn:\n\n gif, jpeg, jpg, png, bmp");
}else{
frm.submit()
}
}
</script>

<form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
<input type="file" id="file" name="file" onchange="check_pic(this.value,this.form)">
<input type="submit" value="submit">
</form>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum