I have a file input where the client adds an image and an img element is created through DOM, the problem is that I only have one file input and then with the submit button I want to send all the images that have been selected one by one to a file. php and upload them to the server, is there any way to go putting those files in a multiple input file and so just send the multiple input? or what would be the most optimal way?
Maybe you can try with input array like:
<form method="post" enctype="multipart/form-data" action="index.php">
<input name="file[]" type="file" />
<input name="file[]" type="file" />
...
<input type="submit" name="add" value="Add" />
</form>
Pro Tip: Read about multiple on MDN
I'm not sure if this is exactly what you're looking for, but this solved my needs to upload/save multiple images.
Save this code in a file called upload.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*Upload Test*</title>
</head>
<body>
<form action="up.php" method="post" multipart="" enctype="multipart/form-data">
<input type="file" name="img[]" multiple accept=".jpg,.jpeg,.png" onchange="submit()">
<input type="submit">
</form>
</body>
</html>
Save this code in a file called up.php:
<?php
$img=$_FILES['img'];
if(!empty($img)) {
$img_desc=reArrayFiles($img); $cnt=0;
foreach($img_desc as $val) {
$newname=$val['name'];
echo $newname.' ('.$val['type'].') : ';
if(file_exists('./uploads/'.$newname)){
echo '<b>Image already exists</b><br>';
}else{
move_uploaded_file($val['tmp_name'],'./uploads/'.$newname);
if($val['error']==0){
$cnt++;
echo 'Uploaded!<br>';
}else{
echo '<b>Error</b><br>';
}
}
}
echo '<hr>Uploaded '.$cnt.' images.';
}
function reArrayFiles($file) {
$file_ary=array();
$file_count=count($file['name']);
$file_key=array_keys($file);
for($i=0;$i<$file_count;$i++) {
foreach($file_key as $val) {
$file_ary[$i][$val]=$file[$val][$i];
}
}
return $file_ary;
}
?>
This code was adapted from an example here.
Related
I want a validation onkeyup from an input form, I've made a jquery. I'm having a hard time finding why is it not checking? I need to go to a php page in checking. What could be wrong to my code that it don't work?
<html>
<head>
<title>
reg
</title>
</head>
<body>
<form method="post">
<input type="text" name="name" onkeyup="check_user()" id="name"/><div id="checking">Checking</div>
<button type="submit" name="submit">Submit<button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
document.getElementById("submit").disabled=true;
function check_user(){
var name = document.getElementById("name").value;
$.post("user_check.php",
{
user: name
},
function(data,status){
if(data=='<p style="color:red">Name contains a number</p>'){
document.getElementById("submit").disabled=true;
}
else{
document.getElementById("submit").disabled=false;
}
document.getElementById("checking").innerHTML=data;
}
);
}
</script>
</body>
</html>
user_check.php
<?php
if (isset($_POST['user'])) {
if(preg_match('/^\d+$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
?>
You can validate the text box by adding the pattern attribute like this pattern="[a-zA-Z]+"
<input type="text" name="name" pattern="[a-zA-Z]+" title="please just add strings" id="name"/>
i also notice in your code you did not add the id for the submit button thats why your submit button is not disabled, your code should like this for submit button.
Submit
1- first add the id attribute of the submit button id="submit"like this
<button type="submit" id="submit" name="submit">Submit<button>
2- update the code on user_check.php
if (isset($_POST['user'])) {
if(!preg_match('/^([^0-9]*)$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
I'm trying to have multiple images uploaded by a user passed through a function and then processed with the submit of the form. I have the following form which takes in the users upload files:
<form id="formUploadFile" action="<?php echo $uploadHandler ?>"
enctype="multipart/form-data" method="post" >
<p>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>">
</p>
<p align="center">
<label for="file" >First, Choose up to 20 images!</label>
<input type="file" name="files[]" multiple />
</p>
</p>
<p class="text-center">
<h5>Then, Choose your Difficulty!</h5>
<div class="btn-group">n>
<button type="button" class="btn btn-success" value="Novice" onclick="changeDifficulty(1)">Novice</button>
<button type="button" class="btn btn-success" value="Intermediate" onclick="changeDifficulty(2)">Intermediate</button>
</div>
</p>
</form>
And then I have the following function which takes in the difficulty choice, displays a loading circle and then should submit the form with the multiple images:
<script>
function changeDifficulty(number){
var difficulty = document.getElementById('hiddDiff');
var form = getElementById('formUploadFile');
difficulty.value = number;
document.getElementById('hide-div').style.display='none';
document.getElementById('hide-div2').style.display='none';
document.getElementById('loadingScreen').style.display='block';
form.submit();
}
However, the image files are not being submitted with the form... if I take away the "multiple" statement in the line, then this code will pass one image successfully. Any help is appreciated.
I'm not sure where your issue is, but I've tested this myself and it's working perfectly fine with multiple files:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
var time = 0;
var form;
// Make sure the DOM is loaded
document.addEventListener("DOMContentLoaded", function(event) {
// Add event listener to the form submit
document.getElementById("formUploadFile").addEventListener("submit", function(e) {
// Display the loading image
document.getElementById('loadImg').style.display='block';
// Prevent the form submit unless time is equal to 3
form = function(){
// Time is equal to 3, so submit the form
if(time === 3){
document.getElementById("formUploadFile").submit();
} else {
// Repeat the form function every second and increase time by 1 on each loop
setTimeout(form, 1000);
time++;
e.preventDefault();
}
}
form();
});
});
</script>
</head>
<body>
<img id="loadImg" src="load.gif" style="display:none;">
<form id="formUploadFile" name="upload" action="upload.php" method="POST" enctype="multipart/form-data">
Select images to upload: <input type="file" name="image[]" multiple>
<input type="submit" name="upload" value="upload">
</form>
</body>
</html>
I've put comments inside the code that explain what's happening.
I include my HTML in PHP using heredoc, and I want to get the user input variable that is inside heredoc, and echo it out. I tried using $_GET["input"], but I got error undefined index:input
May I know how to get the input variable?
<?php
$htmlfile= <<<html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Seller Evaluation System</title>
<style type="text/css">
body {background-image:url("images.jpg");}
</style>
</head>
<body>
<h1><center><font color="darkblue">Seller Evaluation System</font><center></h1>
<p><center>
<script>
function searchSite(){
var input=document.getElementById("searchinput").value;
var searchForm=document.getElementById("searchForm");
searchForm.action="http://www.mudah.my/Malaysia/Electronics-3000/"+input+"-for-sale?lst=0&fs=1&q="+input+"y&cg=3000&w=3&so=1&st=s";
searchForm.submit();
}
</script>
<form method="get" action="ttt.php" id="searchForm">
<input type="text" id="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
<button onclick="searchSite()">Search</button>
</form>
<p><label>Mudah<input type="checkbox" name="searchFrom" value="Mudah" checked/></label>
<label><font color="grey">Lazada</font><input type="checkbox" name="searchFrom" value="Lazada" disabled="disabled"/></label>
<label><font color="grey">Lelong</font><input type="checkbox" name="searchFrom" value="Lelong" disabled="disabled"/></label>
<label><font color="grey">Ebay</font><input type="checkbox" name="searchFrom" value="Ebay" disabled="disabled"/></label></p>
</center></p></br>
</body>
</html>
html;
echo $htmlfile;
$userInput=$_GET["input"];
echo $userInput;
?>
You have to call the input name "searchinput". But it could not be available if you not send the form, and you have to call it by "name" tag, noy by "id".
You can show it after send using Javascript, no PHP.
This works, but the form have to be processed by the same file, so "action" have to be empty. If not, you can get the GET parameters in the file process your form, in your example ttt.php
<?php
$htmlfile= <<<html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Seller Evaluation System</title>
<style type="text/css">
body {background-image:url("images.jpg");}
</style>
</head>
<body>
<h1><center><font color="darkblue">Seller Evaluation System</font><center></h1>
<p><center>
<form method="get" id="searchForm">
<input type="text" name="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
<button type="submit">Search</button>
</form>
</center></p></br>
</body>
</html>
html;
echo $htmlfile;
$userInput=$_GET["searchinput"];
echo $userInput;
?>
$_GET[..] takes the name of a form element. So in your HTML you need to include that:
<input type="text" name="input" id="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
Also note you only want to get the item when you submitted the form, you need to first check the GET exist:
// If we submitted our form with a element named "input", then echo
if(isset($_GET["input"]) {
$userInput=$_GET["input"];
echo $userInput;
}
That way the code only will run if the form was submitted.
HTML CODE
<form action="send.php" method="post">
<input type="hidden" name="qty" id="quantity" value="">
<input type="submit" id="submit">
</form>
JAVASCRIPT CODE
var qty=10;
$("#submit").click(function(){
$("#quantity").val(qty);
});
PHP FILE (send.php)
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>
My code above is receiving an error on the php file. It says that the index qty is undefined. How can I send an integer value of a variable from javascript to php?
You do not have any issues with you javascript or you PHP code.
when you recieve undefined error, it means that the object is not even posted to the send.php file. so the problem is with the object or the way you are sending it, not with the value in it.
with a look at you code I saw that you have two action tags and no method tag and that is what causing the error.
with no method tag, the form uses GET method instead of POST method.
so you just have to change this line:
<form action="send.php" action="post">
with this line:
<form action="send.php" method="post">
simply use
var qty = document.getElementById("qty").value
action="post"> should be method="post">
This may help you:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var qty=10;
$("#submit").click(function(e){
var qty=10;
$.ajax({
url:'send.php',
type:'POST',
data:{'qty':qty},
success: function(e){
alert(e);
//do some thing
}
});
});
});
</script>
</head>
<body>
<form id="myform" action="send.php" method="post" onSubmit="return false;">
<input type="submit" id="submit">
</form>
</body>
</html>
send.php
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>
<html>
<head>
<title>File Upload Form</title>
</head>
<body>
This form allows you to upload a file to the server.<br />
<form action="getfile.php" method="post"><br />
Type (or select) Filename:
<input type="file" name="uploadFile" />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
I am working on a php language . I am uploading a pic from my computer . But there are two buttons ie choose file and Upload file . CHOOSE FILE is used to select the picture from PC and upload file button is used as SUBMIT button but i need a single button by clicking on it it will open my pc window to browse the photos and select it and it also act as a submit button . Is there any way to do this with single button
you need to change to things in your form tag:
1) Add a name tag: say name="frm"
2) enctype="multipart/form-data"
Then in your input file type add a function onchange="frm.submit();" // Where frm is name of the form
You can wait an event change on the input type="file" and send file after this event.
If you use jQuery, you can send the form with .submit().
Try with something like this
$("input[type='file']").on("change", function(){
$("form").submit();
});
.on("change", handler) : http://api.jquery.com/change/
.submit() : http://api.jquery.com/submit/
used jquery uplodify: uploadify
Demo
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
also check this for auto upload auto upload
Here's the code. Just use this as it is and it will work.
<html>
<head>
<title>File Upload Form</title>
</head>
<script>
$(document).ready(function(){
$("input[type='file']").on("change", function(){
$("#form1").submit();
});
});
</script>
<body>
This form allows you to upload a file to the server.<br />
<form action="getfile.php" method="post" enctype="multipart/form-data" id="form1"><br />
Type (or select) Filename:
<input type="file" name="uploadFile" />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
This is what I've done in my project:
HTML:
<input type="button" id="btnUpload" value="Upload File" />
<form action="getfile.php" method="post" id="upload_form" style="display: none;">
Type (or select) Filename:
<input type="file" name="uploadFile" />
</form>
Javascript
$(function(){
$('#btnUpload').click(function(){
//Show select file dialog
$('#uploadFile').click();
//Wait for user to select a file
var tmr = setInterval(function(){
if($('#uploadFile').val() !== "") {
clearInterval(tmr);
$('#upload_form').submit();
}
}, 500);
});
});