I have an html form where i have input file array. What im trying to achieve is get the file array in php file loop through it and check if a file extension is correct else add it to array and then show as json array in ajax. Can someone help me? here is the code for the form:
<html>
<head>
<title>Multiple file upload handling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#form").submit(function(e){
var file1 = $("#file1").val();
var file2 = $("#file2").val();
$("#results").text("");
var results = $("#results");
if(file1 == "" || file2 == ""){
results.text("File 1 and File 2 are empty.");
}else {
var formarray = new FormData($("#form")[0]);
$.ajax({
url: "upload.php",
type: "POST",
dataType: "JSON",
enctype: 'multipart/form-data',
async: false,
cache: false,
contentType: false,
processData: false,
data: formarray,
success:function(response){
if(response.success == false){
$(response.message).each(function(index, value){
results.append("<li id="+ index + ">" + value + "</li>");
});
}else{
alert(response.message);
}
}
});
}
e.preventDefault();
});
})
</script>
</head>
<body>
<form method="post" role="form" enctype="multipart/form-data" id="form">
<input type="file" id="file1" name="file[]" style="margin-bottom:30px;"><br>
<input type="file" id="file2" name="file[]" style="margin-bottom:30px;"><br>
<input type="submit" id="upload" name="upload">
</form>
<div id="results"></div>
</body>
</html>
And below is the php code:
<?php
$filenames = $_FILES['file']['name'];
$filesizes = $_FILES['file']['size'];
$file_tmp = $_FILES['file']['tmp_name'];
$data = array();
$errors = array();
foreach($filenames as $key=>$value){
$filesize = $_FILES["file"]["size"][$key];
$filetype = $_FILES["file"]["type"][$key];
$file_tmpname = $_FILES["file"]["tmp_name"][$key];
$valid_extensions = array("jpeg", "jpg", "gif", "png");
$ext = explode(".", $value);
$extension = end($ext);
if(!in_array($extension, $valid_extensions)){
$errors[] = $value;
$data["success"] = false;
$data["message"] = $errors;
} else {
$data["success"] = true;
$data["message"] = "success";
move_uploaded_file($file_tmpname, "uploads/".$filename);
}
}
echo json_encode($data);
?>
Related
I m trying to upload two different files using Jquery and Ajax along with a text box.
However I can able to upload a single file and textbox using the code I have, but when I try to add another input type file, it breaks and doesn't upload any.
The code for single input type file I have: (upload fine)
test.php
<form method="post" action="" enctype="multipart/form-data" id="myform">
<div class='preview'><p class="temp"></p></div>
<div >
<input type="text" id="title" name="title" />
<input type="file" id="image" name="image" />
<input type="file" id="image" name="image2" />
<input type="button" class="button" value="Upload" id="but_upload">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but_upload").click(function(){
var fd = new FormData();
var files = $('#image')[0].files;
var title = $("#title").val();
fd.append('image',files[0]);
fd.append('title',title);
$.ajax({
url:'test2.php',
type:'post',
data:fd,
contentType: false,
processData: false,
success:function(response){
if(response != 0){
$(".temp").html(response);
$('.preview').show();
}else{
alert('File not uploaded');
}
}
});
});
});
</script>
test2.php
<?php
/* Getting file name */
$filename = $_FILES['image']['name'];
$title = $_POST['title'];
/* Location */
$location = "images-main/post-images/".$filename;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Check file extension */
if(in_array(strtolower($imageFileType), $valid_extensions)) {
/* Upload file */
if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
$response = $title;
}
}
echo $response;
exit;
The code for multiple input type file I have: (doesn't upload anything)
test.php
<form method="post" action="" enctype="multipart/form-data" id="myform">
<div class='preview'><p class="temp"></p></div>
<div >
<input type="text" id="title" name="title" />
<input type="file" id="image" name="image" />
<input type="file" id="image" name="image2" />
<input type="button" class="button" value="Upload" id="but_upload">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but_upload").click(function(){
var fd = new FormData();
var files = $('#image')[0].files;
var filess = $('#image')[1].filess;
var title = $("#title").val();
fd.append('image',files[0]);
fd.append('image2',filess[0]);
fd.append('title',title);
$.ajax({
url:'test2.php',
type:'post',
data:fd,
contentType: false,
processData: false,
success:function(response){
if(response != 0){
$(".temp").html(response);
$('.preview').show();
}else{
alert('File not uploaded');
}
}
});
});
});
</script>
test2.php
<?php
/* Getting file name */
$filename = $_FILES['image']['name'];
$filename2 = $_FILES['image2']['name'];
$title = $_POST['title'];
/* Location */
$location = "images-main/post-images/".$filename;
$location2 = "images-main/post-images/".$filename2;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Check file extension */
if(in_array(strtolower($imageFileType), $valid_extensions)) {
/* Upload file */
if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
if(move_uploaded_file($_FILES['image2']['tmp_name'],$location2)){
$response = $title;
}
}
}
echo $response;
exit;
Any help is greatly appreciated...
This works fine. Thanks to #CBroe:
Here what did the trick.
test.php
<form method="post" action="" enctype="multipart/form-data" id="myform">
<div class='preview'><p class="temp"></p></div>
<div >
<input type="text" id="title" name="title" />
<input type="file" id="image" name="image" />
<input type="file" id="video" name="video" />
<input type="button" class="button" value="Upload" id="but_upload">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but_upload").click(function(){
var fd = new FormData();
var files = $('#image')[0].files;
var filess = $('#video')[0].files;
var title = $("#title").val();
fd.append('image',files[0]);
fd.append('video',filess[0]);
fd.append('title',title);
$.ajax({
url:'test2.php',
type:'post',
data:fd,
contentType: false,
processData: false,
success:function(response){
if(response != 0){
$(".temp").html(response);
$('.preview').show();
}else{
alert('File not uploaded');
}
}
});
});
});
</script>
test2.php
<?php
/* Getting file name */
$filename = $_FILES['image']['name'];
$filename2 = $_FILES['video']['name'];
$title = $_POST['title'];
/* Location */
$location = "images-main/post-images/".$filename;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
$location2 = "images-main/post-images/".$filename2;
$imageFileType2 = pathinfo($location2,PATHINFO_EXTENSION);
$imageFileType2 = strtolower($imageFileType2);
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Upload file */
if(move_uploaded_file($_FILES['video']['tmp_name'],$location2)){
$response = $title;
}
if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
$response = $title;
}
echo $response;
exit;
I am trying to upload a csv file using this code but the file directory is not getting uploaded to the folder and i cannot see any error in the code.
Please help me in this.
HTML code:
<form method="POST" action="submit.php" enctype="multipart/form-data"">
<input type="file" name="file" id="upload"><br>
</form>
JQUERY AJAX code:
$(document).ready(function(){
$('#upload').on('change', function(e) {
e.preventDefault();
var file=this.files[0];
console.log(file);
var filename = file.name;
var ext = filename.split('.')[1];
if(ext == "csv"){
FileUploadAjaxCall();
}else{
$("#fileMsg").html("Extension not valid:Try Again");
}
});
});
function FileUploadAjaxCall(){
$.ajax({
url:'submit.php',
type:'POST',
data:new FormData($('#upload').get(0)),
contentType:false,
cache:false,
processData:false,
success:function(data){
if(data == 1){
console.log("File Uploaded Successfully");
}else{
console.log(data);
console.log("Error");
}
}
});
}`
PHP code:
<?php
$file = $_FILES['file'];
$filename = $_FILES['file']['name'];
$filetmpname = $_FILES['file']['tmp_name'];
$fileDes = 'uploads/'.$filename;
$t = move_uploaded_file($filetmpname,$fileDes);
if($t == true){
echo 1;
};
?>
I have re-written your code as follows. Its always good to validate files upload at server backend and javascript validation can be fooled.
Try the code below and let me see what happens
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload_processor.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
$("#errorLayer").html(data);
},
error: function()
{
}
});
}));
});
</script>
</head>
<body>
<div>
<form id="uploadForm" action="upload_processor.php" method="post">
<div id="targetLayer"></div>
<div id="errorLayer"></div>
<div id="uploadFormLayer">
<input name="file" type="file" class="inputFile" /><br/>
<input type="submit" value="Submit" class="btnSubmit" />
</form>
</div>
</div>
</body>
</html>
<?php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['file']['tmp_name'])) {
$fileName = $_FILES['file']['name'];
$sourcePath = $_FILES['file']['tmp_name'];
$targetPath = "uploads/".$_FILES['file']['name'];
if($fileName ==''){
echo "<div id='errorLayer'>Please select file</div>";
exit;
}
$fileType = pathinfo($fileName, PATHINFO_EXTENSION);
$allowTypes = array('csv');
if (!in_array($fileType, $allowTypes, true)) {
echo "<div id='errorLayer'>File type is invalid. Only CSV is allowed</div>";
exit;
}
if(move_uploaded_file($sourcePath,$targetPath)) {
echo "<div id='targetLayer'>File uploaded successfully</div>";
?>
<?php
}
}
}
?>
//form.html
<form method="POST" action="submit.php" id="uploadForm">
<input type="file" name="file" id="upload" accept=".csv"><br>
<input type="submit">
</form>
<div id="fileMsg"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(e){
$('#uploadForm').on('submit', function(e) {
e.preventDefault();
$.ajax({
url:'submit.php',
type:'POST',
data:new FormData(this),
contentType:false,
cache:false,
processData:false,
success:function(){
$("#fileMsg").html("File Uploaded Successfully");
},
error:function(){
//$("#fileMsg").html(data);
$("#fileMsg").html("Error");
}
});
});
});
</script>
//submit.php
<?php
// $file = $_FILES['file'];
$filename = $_FILES["file"]["name"];
$filetmpname = $_FILES["file"]["tmp_name"];
$fileDes = "uploads/".$filename;
$t = move_uploaded_file($filetmpname,$fileDes);
if($t == true){
echo "1";
};
?>
u can do it like this
here in ajax script input with id name'file' is fine i want data from input with id 'vid' also sent using ajax how to later below code
<input type="file" name="file" id="file" />
<div style="background:url() no-repeat">
<span id="uploaded_image" ><img src=" '.$row["carimg"].' " height="150" width="225" class="img-thumbnail" /></span></div>
here is the ajax code
<script>
$(document).ready(function(){
$(document).on('change', '#file', function(){
var name = document.getElementById("file").files[0]...
var form_data = new FormData();
var ext = name.split('.').pop().toLowerCase();
if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1)
{
alert("Invalid Image File");
}
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getEleme...
var f = document.getElementById("file").files[0]...
var fsize = f.size||f.fileSize;
if(fsize > 2000000)
{
alert("Image File Size is very big");
}
else
{
form_data.append("file", document.getElementById('file').files[0]...
$.ajax({
url:"up1.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
beforeSend:function(){
$('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
},
success:function(data)
{
$('#uploaded_image').html(data);
}
});
}
});
});
</script>
here is the php
<?php
//upload.php
$id = $_FILES["vid"];
if($_FILES["file"]["name"] != '')
{
$test = explode('.', $_FILES["file"]["name"]);
$ext = end($test);
$name = gen_random_string(6)."n" . '.' . $ext;
$location = 'assets/img/cars/' . $name;
move_uploaded_file($_FILES["file"]["tmp_name"], $location);
echo $id;
echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
$sql = "UPDATE vehicles SET carimg='".$location."' WHERE vid='".$id."'";
}
mysqli_query($connect, $sql);
?>
How to send more than one data in this php ajax form this one capable of sending one data only please help
Add below form_data.append("file", document.getElementById('file').files[0]
this statement
form_data.append("vid",document.getElementById('vid').innerHTML);
Since you are POSTing, so from your php file:
$vid = $_POST['vid'];
I have created a jQuery/AJAX script for file uploading and I handle the upload with PHP. It works perfectly with a progress bar and validations. There is one issue however, I cannot get any response text that I have set in PHP and encoded it using json_encode();, but don't get any response and get this instead:
<div class="upload-div">
<form method="post" enctype="multipart/form-data" class="upload_form" >
<label for="file" id="file_label" class="file-label"><i class="fa fa-plus"></i> إضافة صور<input type="file" name="files[]" id="file" multiple="" accept="image/*" /></label>
<input type="submit" id="upload_files" name="submitUpload" value="رفع الصور" />
</form>
<div class="progress">
<div class="bar"></div>
</div>
<div class="status-message"></div>
<div class="images-previews"></div>
<div id="next_step"></div>
<span class="submit-buttons">
<i class="fa fa-arrow-right"></i> الرجوع
<form method="post"><input type="submit" name="submitNoPics" value="التقدم بدون صورة" /></form>
</span>
</div>
<script src="js/upload.js"></script>
<script src="js/jquery.form.min.js"></script>
{"message":"Successfully uploaded 1 files!"}
As you can see the message I want to display is on the last line of code but it doesn't show alone. It shows with the whole HTML document. I will post my HTML and PHP code below, because I am new to Ajax and I am struggling. Please help me if you can and explain because I don't just want to get it done, I want to actually understand how and why this is not working. Thank you.
PHP:
<?php
//file upload
$extensions = array('jpeg', 'jpg', 'png', 'gif');
$dir = 'user-uploads/';
$count = 0;
$imgCounter = 1;
if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files'])){
for($x = 1; $x <= 8; $x++){
unlink('user-uploads/img'.$listingID.'-'.$x.'.jpg');
unlink('user-uploads/img'.$listingID.'-'.$x.'.png');
unlink('user-uploads/img'.$listingID.'-'.$x.'.gif');
}
mysqli_query($connectionDB, "DELETE FROM ad_image_tbl WHERE ad_id = $listingID");
// loop all files
foreach ( $_FILES['files']['name'] as $i => $name ){
// if file not uploaded then skip it
if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )
continue;
/* skip unprotected files
if( !in_array(pathinfo($name, PATHINFO_EXTENSION), $extensions) )
continue;
*/
switch($_FILES['files']['type'][$i]){
case 'image/jpeg' : $ext = '.jpg'; break;
case 'image/png' : $ext = '.png'; break;
case 'image/gif' : $ext = '.gif'; break;
default : $ext = '';
}
if($ext == ''){
echo errorMessage('<li>الملف المرفق لا يعتبر صورة</li>');
$error_message = 'الملف المرفق لا يعتبر صورة';
$message = array('message'=>'Attached file is not a valid image file.');
exit();
}
else{
// now we can move uploaded files
if($count <= 7 ){
$listingImage = $dir.'img'.$listingID.'-'.$imgCounter.$ext;
if( move_uploaded_file($_FILES["files"]["tmp_name"][$i], $listingImage))
mysqli_query($connectionDB, "INSERT INTO ad_image_tbl VALUES('$imgCounter', '$listingID', '$listingImage')");
$imgCounter++;
$count++;
}
}
}
$message = array('message'=>'Successfully uploaded '.$count.' files!');
echo json_encode($message);
}
?>
jQuery/AJAX:
$(function() {
/* variables */
var fileInput = document.getElementById('file');
var fileCount = fileInput.files.length;
if(fileCount > 8){
fileCount = 8;
}
var bar = $('.bar');
var progress = $('.progress');
/* submit form with ajax request using jQuery.form plugin */
$('.upload_form').ajaxForm({
/* set data type json */
dataType:'JSON',
/* reset before submitting */
beforeSend: function() {
bar.width('0%');
progress.css('display', 'block');
},
/* progress bar call back*/
uploadProgress: function(event, position, total, percentComplete) {
var pVel = percentComplete + '%';
bar.width(pVel);
},
/* complete call back */
complete: function(message){
// var responseMessage = $.parseJSON(data.responseText);
progress.css('display', 'none');
document.getElementById('next_step').innerHTML = '<form method="post"><input type="submit" name="uploadSubmit" value="الانتهاء" /></form>';
console.log(message)
}
});
});
Why could you use a plugin to handle upload.
dropzone.js
You can get response as below
$(function() {
Dropzone.options.uiDZResume = {
success: function(file, response){
alert(response);
}
};
});
I wanna update profile picture of user that has logged in to my website.
I use ajax, jquery, php to update data, in order to update data without refresh the page.
This code just working to upload image into folder, but when I use this code to update image from database, it only sent null into database.
jquery and ajax script
$("#form-ava").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "../config.inc/upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
//$("#preview").fadeOut();
$("#err").fadeOut();
},
success: function(data)
{
if(data=='invalid')
{
// invalid file format.
$("#err").html("Invalid File !").fadeIn();
}
else
{
// view uploaded file.
$("#preview-ava").html(data).fadeIn();
$("#form-ava")[0].reset();
$("#hidden-list").hide();
}
},
error: function(e)
{
$("#err").html(e).fadeIn();
}
});
}));
And it's the php syntax
upload.php
<?php
require_once 'koneksi.php';
if($_POST)
{
$id_user= $_POST['id_user'];
$img = $_FILES['image']['name'];
$tmp = $_FILES['image']['tmp_name'];
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = '../images/ava/'; // upload directory
try {
// get uploaded file's extension
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
// can upload same image using rand function
$final_image = rand(1000,1000000).$img;
// check's valid format
if(in_array($ext, $valid_extensions))
{
$path = $path.strtolower($final_image);
if(move_uploaded_file($tmp,$path))
{
echo "<img src='$path' />";
}
else
{
echo 'invalid';
}
$update = $db_con->prepare("UPDATE tb_users SET image=:img WHERE id_user=:id_user");
$update->bindparam(":id_user", $id_user);
$update->bindparam(":img", $image);
$update->execute();
$count = $update->rowCount();
if($count>0) {
echo "success";
}else {
echo "can't update!";
}
}
}catch(PDOException $e) {
echo $e->getMessage();
}
}
?>
HTML syntax
<form id="form-ava" action="../config.inc/upload.php" method="post" enctype="multipart/form-data">
<input type="hidden" id="id_user" name="id_user" value="<?php echo $row->id_user;?>">
<input id="ava-img" type="file" name="image" value="<?php echo $row->image;?>"/>
<input id="button" type="submit" value="Simpan" name="update"></br>
</i> Batal
</form>
<div id="err"></div>
<form id="form-ava" action="../config.inc/upload.php" method="post" enctype="multipart/form-data">
<input type="hidden" id="id_user" name="id_user" value="<?php echo $row->id_user;?>">
<input id="ava-img" type="file" name="image" value="<?php echo $row->image;?>"/>
<input id="button" type="submit" value="Simpan" name="update"></br>
</i> Batal
</form>
<div id="err"></div>
<script type="text/javascript">
$("#form-ava").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "../config.inc/upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
//$("#preview").fadeOut();
$("#err").fadeOut();
},
success: function(data)
{
if(data=='invalid')
{
// invalid file format.
$("#err").html("Invalid File !").fadeIn();
}
else
{
// view uploaded file.
$("#preview-ava").html(data).fadeIn();
$("#form-ava")[0].reset();
$("#hidden-list").hide();
}
},
error: function(e)
{
$("#err").html(e).fadeIn();
}
});
}));
</script>
I found two errors in your code in proses.php
<?php include 'koneksi.php';
$foto = #$_POST['foto'];
$id = #$_POST['id'];
$update = $db->prepare("UPDATE tb_users SET foto=:foto WHERE id=:id");
$update>bindParam(":id", $id);
$update->bindParam(":foto", $foto);
$update->execute();
if($update->rowCount() > 0) {
echo "success";
}
?>
the error messages would be very helpful, but at the very least you are missing a - in $update>bindParam(":id", $id);, so it should be $update->bindParam(":id", $id);
you did the same thing again with $update>rowCount() should be $update->rowCount()
update: I see you edited your question to fix those, but still haven't posted the errors you're receiving. Were those tpyos in your question, or are you progressively fixing your code?
still, it looks like you're missing a closing curly brace } in this statement:
if($update>rowCount() > 0) {
echo "success";
?>
also, why are you silencing notices with #$_POST? if those values are empty, then do you really want to be updating the table?