JQuery AJAX equivalent of form's submit file - php

I have a form, like this
<form id="picuploadform" enctype="multipart/form-data" method="post" action="">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="hidden" id = "picssn" name="picssn" value="qweweqwq">
</div>
<div class="row" style="width:150px;">
<input type="submit" value="Upload" />
</div>
</form>
Which when I click the submit button I have PHP on this page to process it just fine. $_FILES for receiving file and $_POST for reading picssn that came with the hidden input. But due to problem with Jquery mobile I can't use submit or .submit() now. So I want to use
$.post('myphpfile.php', {picssn:$('#picssn').value(), file: $('#fileToUpload').xxxxxxxxxxxxxxxxx });
instead. But I have no idea how to grab the file out of that form and send it this way. Is there some method that can replace xxxxxxxxxxxxxx ? Thanks!

On your form element, you need to disable the ajax submit, and then fix your other code.
Try this:
<form id="picuploadform" enctype="multipart/form-data" method="post" action="#" data-ajax="false">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="hidden" id = "picssn" name="picssn" value="qweweqwq">
</div>
<div class="row" style="width:150px;">
<input type="submit" value="Upload" />
</div>
</form>

You cant upload directly via ajax. Check this perhaps:
http://blueimp.github.com/jQuery-File-Upload/ or uploadify.com

Related

$_FILES uploads only 1 file

<label class="labelFile">Bestand kiezen...</label>
<input type="file" name="images_1" class="fileChoose" accept="image/*"></br></br></br>
<label class="labelFile">Bestand kiezen...</label>
<input type="file" name="images_2" class="fileChoose" accept="image/*"></br></br></br>
It only fills the first image and the second one it gives an errors: "4", how to fix it,
I want multiple input fields not 1 multiple :D
if you put the form with
<form method="POST" enctype="multipart/form-data" >
two items are returned to you
try like this
<?php
var_dump($_FILES['images_1']);
var_dump($_FILES['images_2']);
?>
<form method="POST" enctype="multipart/form-data" >
<label class="labelFile">Bestand kiezen...</label>
<input type="file" name="images_1" class="fileChoose" accept="image/*"></br></br></br>
<label class="labelFile">Bestand kiezen...</label>
<input type="file" name="images_2" class="fileChoose" accept="image/*"></br></br></br>
<button value="ppp" type="submit">send </button>
</form>

Form not sending file when submitted with Jquery

I have this form:
<label for="pdffile">Upload</label>
<form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="file" id="pdffile" style="display:none" form="upload"
</form>
It is supposed to be submitted with this jquery:
$('#pdffile').change(function() {
$('#upload').attr("action", "/upload").submit();
});
However when I check in PHP, nothing is uploaded:
dd($request)
Always gives me back null instead of the requested item.
Any help?
Your input does not have name
<input type="file" id="pdffile" style="display:none" form="upload"
change to
<input type="file" id="pdffile" style="display:none" name="upload"/>
and in your action you can use $_FILES to get upload file

prestashop file upload won't work

I am trying to implement file upload in Order Detail page.
Created form
<form action="" method="post" id="uploadForm" enctype="multipart/form-data">
  <label for="fileUpload">{l s='File to upload:'}</label>
  <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
  <input type="file" name="fileUpload" id="fileUpload" />
<div class="submit">
<input type="hidden" name="id_order" value="{$order->id|intval}" />
<input type="submit" class="unvisible" name="submitMessage" value="{l s='Send'}"/>
<button type="submit" name="submitMessage" class="button btn btn-default button-medium"><span>{l s='Send'}<i class="icon-chevron-right right"></i></span></button>
</div>
</form>
and added this to OrderDetailController.php
if (Tools::isSubmit('submitMessage')) {
$idOrder = (int)Tools::getValue('id_order');
$msgText = Tools::getValue('msgText');
if (isset($_FILES['fileUpload']['name']) && !empty($_FILES['fileUpload']['name']) && !empty($_FILES['fileUpload']['tmp_name']))
{
$this->errors[] = Tools::displayError('Works');
}
...
Now when i submit form - it saves message and completely ignores file.
Does anyone know why?
Solved myself. Answered here
It was ajax issue not sending $_FILES[] data
I'm assuming you placed this into order-detail.tpl of default template.
You put your file input into a separate form that doesn't do anything since it does not have a submit button. The comments form on that page is a completely different one that's why your input is ignored.
What you want to do is place your html code without <form> tags into a proper form that submits message. The form is at the bottom of order-detail.tpl.
<form action="{$link->getPageLink('order-detail', true)|escape:'html':'UTF-8'}" method="post" class="std" id="sendOrderMessage">
<h3 class="page-heading bottom-indent">{l s='Add a message'}</h3>
<p>{l s='If you would like to add a comment about your order, please write it in the field below.'}</p>
<p class="form-group">
<label for="id_product">{l s='Product'}</label>
<select name="id_product" class="form-control">
<option value="0">{l s='-- Choose --'}</option>
{foreach from=$products item=product name=products}
<option value="{$product.product_id}">{$product.product_name}</option>
{/foreach}
</select>
</p>
<p class="form-group">
<textarea class="form-control" cols="67" rows="3" name="msgText"></textarea>
</p>
<!-- Your html snippet -->
<p class="form-group">
<label for="fileUpload">{l s='File to upload:'}</label>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<input type="file" name="fileUpload" id="fileUpload" />
</p>
<div class="submit">
<input type="hidden" name="id_order" value="{$order->id|intval}" />
<input type="submit" class="unvisible" name="submitMessage" value="{l s='Send'}"/>
<button type="submit" name="submitMessage" class="button btn btn-default button-medium"><span>{l s='Send'}<i class="icon-chevron-right right"></i></span></button>
</div>
</form>

Html form pass input checkbox variable without dots

I have wired problem.
I have this input inside my form
<form action="..." method="post">
<div class="radio">
<input class="check-with-label" type="checkbox" id="c1-img0" name="img;http://img01.cp.aliimg.com/bao/uploaded/i1/1610868057/T25iVOXaNeXXXXXXXX_!!1610868057.jpg">
<label class="label-for-check" for="c1-img0"><img src="http://img01.cp.aliimg.com/bao/uploaded/i1/1610868057/T25iVOXaNeXXXXXXXX_!!1610868057.jpg"></label>
</div>
</form>
But in my php file i get this variable when i call print_r($_POST);
[img;http://img01_cp_aliimg_com/bao/uploaded/i1/1610868057/T25iVOXaNeXXXXXXXX_!!1610868057_jpg] => on
Like you see I lose all dots in my link in PHP file.
Orginal: img;http://img01.cp.aliimg.com/bao/uploaded/i1/1610868057/T25iVOXaNeXXXXXXXX_!!1610868057.jpg
Recived: img;http://img01_cp_aliimg_com/bao/uploaded/i1/1610868057/T25iVOXaNeXXXXXXXX_!!1610868057_jpg
You have put image link in name attribute instead of value.
Try
<form action="" method="post">
<div class="radio">
<input class="check-with-label" type="checkbox" id="c1-img0" name="image" value="img;http://img01.cp.aliimg.com/bao/uploaded/i1/1610868057/T25iVOXaNeXXXXXXXX_!!1610868057.jpg">
<label class="label-for-check" for="c1-img0"><img src="http://img01.cp.aliimg.com/bao/uploaded/i1/1610868057/T25iVOXaNeXXXXXXXX_!!1610868057.jpg"></label>
</div>
<input type="submit" value="submit">
</form>
<?php
var_dump($_POST);
?>

Smarty Uploading a File with normal Input Files

In my index.php file , I got a code is trace the $_FILE, but seems like when uploaded a pic/jpeg/images file, the return result is 'array(0) { }'. Did I need use smarty's method to assign a input file's method?
var_dump($_FILES);
my photoupload.tpl
<form action="index.php?view=photoupload" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file">
<input class="btn_name" type="submit" name="submit" value="Submit">
</form>
No, you dont have to, heres a part of my current project where i work with smarty:
<form action="upload_contract.php" enctype="multipart/form-data" method="post">
...
<div class="row">
<div class="large-5 columns">
<label for="upload">Dateiupload:</label><span><input type="file" id="upload" name="upload"></span>
</div>
</div>
This one works fine without additional methods.

Categories