Jquery submit() doesn't pass file data - javascript

I have a very simple form.
<form name="text_hero" id="text_hero" action="<?php echo site_url('templates/saveImage/texthero'); ?>" method="post" enctype="multipart/form-data">
<input type="file" name="uploaded_file">
<input type="submit" value"submit file">
</form>
When pressing the submit button the file is uploaded correctly and saves.
When using Jquery to either "click" the submit button or manually submit the form it fails to send the file.
Jquery:
$('#' + FormName).submit();
Can anyone tell me the reason for this?
EDIT
When outputting the php $_FILES var it just outputs Array() with the jquery method but with the button method it outputs the actual file.

About
When you do some upload of files you need put on form this enctype="multipart/form-data"
Example:
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
To save the tmp_file to some file
you need put some validation but the basic upload some file is this.
move_uploaded_file($_FILES['file']['tmp_name'], 'path/to/file');
I hope it help you.

Related

I want to set automatic selected file in input type if file exist in path

I want to set file automatically loaded if exist file in local defined default path.
here is the code
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="hard_file" >
<input type="submit" name="submit" class="submit">
all you have to do is follow this post
How to set a value to a file input in HTML?
In there is a reazon for what that is not permitted:
You cannot due to security reasons.
Imagine:
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>
You don't want the websites you visit to be able to do this, do you? =)

Why does form action call not keep input file when using back button?

function validate_form()
{
//..... validation and other stuff will go here ...
}
<form name="read" id="read" action="test2.php" method="post" enctype="multipart/form-data" onsubmit="return validate_form();">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file remains.
function validate_form()
{
//..... validation and other stuff will go here ...
document.read.action = "test2.php";
}
<form name="read" id="read" action="" method="post" enctype="multipart/form-data" onsubmit="return validate_form(this);">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file is cleared. Why is that? Is the only way to get around this is to save the input into a cookie or session variable? If so, not sure how to save a file.
I have a reason to use the call from JS. I removed most of the code for the above examples. This is happening under Chrome and Firefox. Didn't test others.

submit form as soon as file was selected

I have following html form:
<form method="POST" action="uploadImage" enctype="multipart/form-data">
<input type="file" class="file" name="file"/>
<input type="submit" value="Upload">
</form>
I see two things on page
1 - file selector
2 - upload button
I want to avoid submit button and form should be submitted right after file was selected.
Can you help me?
Maybe this helps you:
$('.file').change(function(){
$('form').submit();
});
with javascript..
<form method="POST" name="myform" action="uploadImage" enctype="multipart/form-data">
<input type="file" class="file" name="file" onchange="document.forms['myform'].submit();"/>
</form>

Creating multi purpose button in html

When on a phone I'm unable to view these two buttons as they are too far apart. I want to make it so after you choose the file, the 'choose file' button would be replaced by the upload button. Is this possible. What would i have to do?
http://goawaymom.com/buttons.png
my html -
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file"class="box"/>
<input type="submit" id="mybut" value="Upload" name="Submit"/>
</form>
-Note I don't care to put them on separate lines or make font smaller- etc
Simplest Way:
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
Without Jquery, Only JavaScript
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
<script type="text/javascript">
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
if(fileName){
remove chose file button and show upload button(visible property)
}
});
});
check jQuery - Detecting if a file has been selected in the file input
Yep, it's very easy indeed. You can listen for onchange event of the file input and hide it.
HTML:
<input name="inpt" type="file"/>
<input type="button" value="Upload"/>
Javascript:
//this event is fired when the file is chosen (not when user presses the cancel button)
inpt.onchange = function(e) {
//setting display to "none" hides an element
inpt.style.display="none";
};
JSfiddle
PS. if you want you can use the same trick to show the "Upload" button only when a file is chosen. In that case the button code will be <input id="btn" type="button" value="Upload" style="display:none"/> and in the Javascript code you write btn.style.display="" to show the button.
I can say that there are multiple ways to do it. But in core java script the below is the approach
(1) Initially set the display style of upload button to none in order to hide that
(2) Write Onchange event handler for input file type
(3) In that handler function if the value is not null then hide the input file by applying display style none and then change the style of upload button to empty('').
Hope this approach works

Blobstore upload with javascript

This is the minimal declaration for the HTML in order to upload a file in Blobstore in the upload_url. What is required with this solution is required to click the Submit button in order the content to be submitted and get redirected. How can I do the post in the background with javascript or jQuery without losing the enctype?
<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
<input type="file" name="file">
<input type="submit" name="submit" value="Submit">
</form>
The jQuery Form plugin allows you to submit multipart forms in the background with Ajax.
Example:
$('#upload_file').submit(function() {
var options = {
clearForm: true // clear all form fields after successful submit
};
$(this).ajaxSubmit(options);
return false;
});
$('[name=submit]').click(function(){
$('#upload_file').submit();
});
Making this work silently requires that you replace your 'submit' input with a 'button' input:
<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
<input type="file" name="file">
<input type="button" name="submit" value="Submit">
</form>

Categories