I have an individual html form for uploading photo on Laravel's blade and I am trying to post the image to the Controller.
The Html form looks like:
<form id="fileForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="fileInput" style="visibility: hidden"/>
<input type="button" value="submit" id="ajaxSubmit" hidden />
</form>
And in (document.ready):
jQuery('input[type=file]').change(function() {
jQuery('#fileForm').submit();
});
jQuery('#fileForm').on('submit',(function(e) {
e.preventDefault();
jQuery.ajax({
url: '',
type: 'POST',
data: new FormData(jQuery(this)[0]),
processData: false,
success: function (data) {
},
complete: function() {
}
})
}))
When I dd(Input:all()); on the controller, it shows this and so on:
However, dd(Input::file('fileInput)) returns null.
When I try dd(Input::hasFile('fileForm')); (which I feel it is not correct), it returns false
Related
I am trying to pass a file object with multiple attribute via AJAX in my WordPress application but not being able to capture them in the process function.
HTML:
<form enctype="multipart/form-data" method="post">
<input type="text" id="album_title" name="album_title" />
<input type="file" multiple" id="photo_upload" name="photo_upload[]" class="files-data" />
<input type="button" value="Submit" onclick="uploadPhoto();" />
</form>
JS:
var formData = new FormData();
formData.append('album_title', jQuery('#album_title').val());
formData.append('security', mbAlbumUploader.ajax_nonce);
jQuery.each(jQuery('.files-data'), function(i, obj) {
jQuery.each(obj.files, function(j, file){
formData.append('files[' + j + ']', file);
});
});
jQuery.ajax({
url: 'mbAlbumUploader.ajax_url,'
type: 'post',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function(response) {
alert(response.files);
}
});
PHP function:
function uploadPhoto() {
$fileName_str = '';
foreach($_FILES['photo_upload']['name'] as $f=>$name) {
$extension = pathinfo($name, PATHINFO_EXTENSION);
$fileName_str .= $name . ', ';
}
die(wp_json_encode(array(
'files' => $fileName_str;
)));
}
What I am doing wrong?
Try to run ajax request by click event or submit event. I made few changes this is script below. Assuming your button has update class.
HTML
<form enctype="multipart/form-data" method="post">
<input type="text" id="album_title" name="album_title" />
<input id="file" name="file[]" type="file" multiple/>
<input class="update" type="submit" />
</form>
JavaScript
$(".update").click(function(e) {
// Stops the form from reloading
e.preventDefault();
$.ajax({
url: 'upload.php',
type: 'POST',
contentType:false,
processData: false,
data: function(){
var data = new FormData();
data.append('album_title', jQuery('#album_title').val());
data.append('security', mbAlbumUploader.ajax_nonce);
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
data.append('body' , $('#body').val());
data.append('uid', $('#uid').val());
return data;
}(),
success: function(result) {
alert(result);
},
error: function(xhr, result, errorThrown){
alert('Request failed.');
}
});
$('#picture').val('');
$('#body').val('');
});
PHP (upload.php)
You can Access your files from $_FILES global.
I am trying to submit data to the database using AJAX. I have one array and I have to pass the value of the array to PHP using AJAX to display all the related records.
<form id="search-form" method="POST">
<input value="4869" name="compare_id[]" type="hidden">
<input value="4884" name="compare_id[]" type="hidden">
<input value="5010" name="compare_id[]" type="hidden">
<input type="button" id="search-button" name="search-button" value="search">
</form>
<div id="response"></div>
AJAX
<script>
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: 'POST',
url: 'response.php',
data: $('#search-form').serialize(),
dataType: 'json',
success: function(response) {
$('#response').html(response);
//alert(response);
}
});
});
});
</script>
PHP
$sql='SELECT Name, Email FROM request WHERE Id IN (' .( is_array( $_POST['compare_id'] ) ? implode( ',', $_POST['compare_id']) : $_POST['compare_id'] ).')';
$records = array();
$query=$conn->query($sql);
if ($query->num_rows > 0) {
while($row=$query->fetch_assoc()){
$records[]=$row;
}
}
echo json_encode($records);exit();
HTML
<form id="search-form" method="POST">
<input value="4869" name="compare_id[]" type="hidden">
<input value="4884" name="compare_id[]" type="hidden">
<input value="5010" name="compare_id[]" type="hidden">
<input type="button" id="search-button" name="search-button" value="search">
</form>
<div id="response"></div>
JS
<script>
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: 'POST',
url: 'response.php',
data: $('#search-form').serialize(),
dataType: 'json',
success: function(response) {
$('#response').html(response);
}
});
});
});
</script>
PHP
var_dump($_POST['compare_id']);
// it is already an array of ids. You can do whatever you want with it.
change your script as below. Your output is in array so you cant add it in div directly
<script>
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: 'POST',
url: 'action.php',
data: $('#search-form').serialize(),
dataType: 'json',
success: function(response) {
$('#response').html();
for(data in response) //loop over your data
{
$('#response').append(response[data].Email); //add email
}
//alert(response);
}
});
});
});
</script>
There are errors in your code. A good way to debug this is to print_r your POST value in your php script.
First $_POST["All"] does not exist. It is all. (php)
Second, you send a GET request not a POST one. (jQuery)
Third, format your date into json. A good way to do this is to create a variable right after compare_id.push, it's more readable, as so :
var json_data = {"my_array" : [1,2, "bonjour", 4]};
Your problem is mostly related to "how to debug". I think you should print what's happening along the way to figure out what's happening.
I have three type of inputs those are file input, text input and variable. I want to upload those inputs by sending data to PHP file by using Ajax JSON. Also I want to know how to capture these data in PHP file.
I am using HTML code without form syntax. variable data name as a val1 in JQuery code.
HTML Code:
<div class="container" id="post">
<textarea id="posttext" autocomplete="off"></textarea>
<input type="file" name="file" id="file" multiple accept=".mp4, .mov, .m4v, .MPEG-4, .gif, .jpg, .png"/>
<button type="button" id="submitpost">Submit</button>
</div>
JQuery Code:
$(document).on("click", "#submitpost", function(){
var val1 = "Some Datas";
$.ajax({
url: post.php,
type: 'POST',
data: VALUES,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
PHP Code:
<?php
if (!isset($_POST['VALUES']) && !empty($_POST['VALUES'])) {
$params = $_POST['VALUES'];
}
?>
How to get each values in PHP to Upload files and insert text and variable data to database.
Use this code:
Html:
<div class="container" id="post">
<form enctype="multipart/form-data" method="POST" id="myform">
<textarea id="posttext" name="posttext" autocomplete="off"></textarea>
<input type="file" name="file" id="file" multiple accept=".mp4, .mov, .m4v, .MPEG-4, .gif, .jpg, .png"/>
<button type="submit" name="submitpost" id="submitpost">Submit</button>
</form>
</div>
Jquery:
$(document).on("click", "#submitpost", function(e){
$("form#myform").submit();
});
$("form#myform").on('submit', function(e){
e.preventDefault();
var val1 = "Some Data";
var file = this.files[0];
var form = new FormData();
form.append('file', file);
form.append('val1', val1);
form.append('posttext', $('#posttext').val());
$.ajax({
url : "post.php",
type: "POST",
cache: false,
async: false,
contentType: false,
processData: false,
data : form,
success: function(response){
alert(response);
}
});
});
PHP Code:
<?php
if (isset($_POST) && !empty($_POST)) {
print_r($_POST);
print_r($_FILES);
}
?>
I have a form with
<form id=myform onsubmit=return validate();>
<input type=text id=name name=name>
</form>
In my javascript file I have
function validate(){
$.ajax({
dataType: 'json',
url: app.url.prefix,
method: 'POST',
data: {service: 'manage', met: 1, name: name },
success: function (data) {
if (data.exists){
return false;
}
}
});
return true;
}
This Ajax code check if the returned data has value especially the data.exists. I would like to prevent submit form based on the value of exists.
This
if (data.exists){
return false;
}
does not really work.
Your problem occurs because of async ajax function call, it returns true before ajax data returns.
I haven't checked it, But you can try something like this:
function validate(){
var self = this;
self.preventDefault();
$.ajax({
dataType: 'json',
url: app.url.prefix,
method: 'POST',
data: {service: 'manage', met: 1, name: name },
success: function (data) {
if (!data.exists){
self.submit();
}
}
});
return false;
}
$('#myform').submit(function() {
return false;
});
This should do the trick, now the form won't reload the page on pressing enter or a button.
EDIT:
Your form is also missing double-quotes
<form id="myform" onsubmit="return validate();">
<input type="text" id="name" name="name">
</form>
Solution:
I have changed my HTML and I have added onclick event than onsubmit
<form id="myform">
<input type="text" id="name" name="name">
<button type="submit" id="button" onclick="validate();">
</form>
Also in Javascript
I prevent the submit here
$("#button").on("click",function(event){
event.preventDefault();
});
Here is my function to check if not exists data so then submit form
function validate(){
$.ajax({
dataType: 'json',
url: app.url.prefix,
method: 'POST',
data: {service: 'manage', met: 1, name: name },
success: function (data) {
if (!data.exists){
$('#myform').submit();
}
}
});
I try to post an uploaded file via ajax to php.
HTML:
<form id="uploadForm" name="uploadForm" action="#" enctype="multipart/form-data">
<input id="name" name="name" class="form-control" type="text" />
<input id="csv" name="csv" type="file" />
<input id="CSVUpload" type="submit" class="btn btn-default" name="Submit" value="Hochladen" />
JS
$("#uploadForm").submit(function () {
var formData = new FormData();
formData.append( 'csv', $( '#csv' )[0].files[0] );
formData.append( 'name', $( '#name'));
jQuery.ajax({
url: "../lib/import.php",
data: formData,
type: "POST",
success: alert('erfolgreich'),
error: alert('Fehler'),
cache: false,
contentType: false,
mimeType: 'multipart/form-data',
processData: false
});
});
and then i try to get the form data in PHP:
$_FILES['csv']
$_POST['name']
But the Ajax call completes with success and error... I'm confused...
The PHP file will not executed correctly...
Thanks for your help!
You aren't assigning functions to success or error.
You are calling the alert function immediately and then assigning its return value.
You need to create new functions to assign to success and error.
success: function () { alert('erfolgreich') },
error: function () { alert('Fehler') },
You are also calling the function as a submit handler, but aren't preventing the normal form submission. Consequently, the browser will load a new page before processing the response to the Ajax request.
$("#uploadForm").submit(function (event) {
event.preventDefault();
Try restructuring your AJAX call with your success and failure code like this:
$.post('../lib/import.php', formData).done(function() {
console.log('done');
}).fail(function() {
console.log('error');
});
See http://api.jquery.com/jquery.post/ for more examples.