Is there any way to send data from php to html without refreshing page.
i open html to upload images..
so i will go to process.php and i got target-path of that images when it has success uploaded.
my problem is. how can i send that target-path to my html back without refreshing page.
This is my javascript:
function startUpload(){
..
return true;
}
function stopUpload(success){
var result = '';
if (success == 1){
.. //get data from php
} else {
..
}
return true;
}
process.php
$destination_path = "../dir/";
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(#move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
//$target-path need to send to input in html
}
sleep(1);
My suggestion would be ajax. It's cleaner and efficient.
Example is how you parse the data
This is for HTML to PHP
$('#submit').click(function()
{
$.ajax({
url: send_email.php,
type:'POST',
data:
{
email: email_address,
message: message
},
success: function(msg)
{
alert('Email Sent');
}
});
});
If you want to pass a value from PHP to HTML
An example would be :
<?php
if( isset($_GET['submit']) )
{
//be sure to validate and clean your variables
$val1 = htmlentities($_GET['val1']);
$val2 = htmlentities($_GET['val2']);
//then you can use them in a PHP function.
$result = myFunction($val1, $val2);
}
?>
<?php if( isset($result) ) echo $result; //print the result above the form ?>
<form action="" method="get">
Inserisci number1:
<input type="text" name="val1" id="val1"></input>
<?php echo "ciaoooo"; ?>
<br></br>
Inserisci number2:
<input type="text" name="val2" id="val2"></input>
<br></br>
<input type="submit" name="submit" value="send"></input>
</form>
In your case it would be :
$destination_path = "../dir/";
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(#move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
$val1 = htmlentities($_GET['val1']); // this value could be obtain via HTML
}
sleep(1);
If your Javascript will handle upload event through AJAX. you can return back correct image url and append back to your webpage.
Try this before add jquery to your html page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Html Form:
<span id="returnImage"></span>
<form id="uploadImage">
<label id="img">Upload Image<label>
<input name="images" type="file" class="img"/>
<input type="submit"/>
</form>
JS:
$("#uploadImage").submit(function(e){
e.preventDefault();
var data = new FormData();
$.each($('.img'), function(i, obj) {
$.each(obj.files,function(j, file){
data.append('upload_files['+i+']', file);
});
});
$.ajax({
type: 'post',
data: data,
url: "image_processor.php",
cache: false,
contentType: false,
processData: false,
success: function(data){
var dataArray = $.parseJSON(data);
$("#returnImage").html('<img src="'+dataArray["img"]+'"/>')
});
});
});
image_processor.php
<?php
$array_add_counter = 0;
foreach ($_FILES['upload_files']['name'] as $imageNameArray){
$NewImage[$array_add_counter]['name'] = $imageNameArray;
$array_add_counter++;
}
$array_add_counter = 0;
foreach ($_FILES['upload_files']['type'] as $imageTypeArray){
$NewImage[$array_add_counter]['type'] = $imageTypeArray;
$array_add_counter++;
}
$array_add_counter = 0;
foreach ($_FILES['upload_files']['tmp_name'] as $imageTmpArray){
$NewImage[$array_add_counter]['tmp_name'] = $imageTmpArray;
$array_add_counter++;
}
$array_add_counter = 0;
foreach ($_FILES['upload_files']['error'] as $imageErrorArray){
$NewImage[$array_add_counter]['error'] = $imageErrorArray;
$array_add_counter++;
}
$array_add_counter = 0;
foreach ($_FILES['upload_files']['size'] as $imageSizeArray){
$NewImage[$array_add_counter]['size'] = $imageSizeArray;
$array_add_counter++;
}
foreach ($NewImage as $images) {
move_uploaded_file($images["tmp_name"], "ImageLocation/".$images["name"]);
$return['img'] = "ImageLocation/".$images["name"];
}
echo json_encode($return);
?>
I tested and it work in my localhost.
Related
I have a website using the Kohana framework. I have a problem when I tried upload multiple image using AJAX. I tried with many methods but without success. I think the problem is in function _save_images($image) at line:
if ($file = Upload::save($image, NULL, $directory))
Because I tried echo this values but receive result like:
Website not support width less than 900px on Computer
A function to save image with parameter $image is array list image.
In ProductImage.php:
protected function _save_images($image)
{
$directory = DOCROOT.'uploads/';
if ($file = Upload::save($image, NULL, $directory))
{
$filename = strtolower(Text::random('alnum', 20)).'.jpg';
Image::factory($file)
->resize(200, 200, Image::AUTO)
->save($directory.$filename);
// Delete the temporary file
unlink($file);
return $filename;
}
}
And I have a function to upload multiple image.
public function action_create()
{
$user = Auth_Jelly::instance()->get_user();
$iduser = $user->id;
if($user->has_role('admin') || $user->check_permission($iduser,'CREATE_PRODUCT')==1){
$this->auto_render = false;
if(Request::$is_ajax)
{
$name_img = Security::xss_clean($_POST['name_img']);
$type_img = Security::xss_clean($_POST['type_img']);
$size_img = Security::xss_clean($_POST['size_img']);
$new_array = array();
foreach($name_img as $item){
$new_array['name'][] = $item;
}
foreach($type_img as $item){
$new_array['type'][] = $item;
}
foreach($size_img as $item){
$new_array['size'][] = $item;
}
$files = $new_array;
unset($new_array);
$ilosc = count($files['name'])-1;
for($i=0; $i<=$ilosc; $i++) {
$_FILES['image_list'.$i]['name'] = $files['name'][$i];
$_FILES['image_list'.$i]['type'] = $files['type'][$i];
$_FILES['image_list'.$i]['size'] = $files['size'][$i];
$array_new[] = array(
'name'=>$_FILES['image_list'.$i]['name'],
'type'=>$_FILES['image_list'.$i]['type'],
'error'=>0,
'size'=>$_FILES['image_list'.$i]['size'],
);
}
foreach ($array_new as $key => $value) {
$this->_save_images($value);
if($this->save_images($value)==FALSE){
echo "Faild Upload";
}else{
echo "Upload Success";
}
}
}
}else{
// Request::current()->redirect('admin/home/denied');
}
}
And in ProductImage.js:
$("#"+form).click(function(){
var image_list = Array();
var imageFiles = document.getElementById("image_list"),
filesLength = imageFiles.files.length;
for (var i = 0; i < filesLength; i++) {
image_list[i] = imageFiles.files[i].name;
}
var myFileList = document.getElementById('image_list').files;
var file ;
var name_img= Array();
var type_img= Array();
var size_img= Array();
// loop through files
for (var i = 0; i < myFileList.length; i++) {
// get item
file = myFileList.item(i);
//or
file = myFileList[i];
name_img[i]= file.name;
type_img[i]= file.type;
size_img[i]= file.size;
}
var local = window.location;
var val_content = tinyMCE.editors[0].getContent();
var language = $.trim($('#product-create-language option:selected').val());
var category = $.trim($('input[name=category]').val());
var status = $.trim($('input[name=createstatus]:checked').val());
var position = $.trim($('input[name=createposition]:checked').val());
var matches = [];
$(".addcheck:checked").each(function() {
matches.push(this.value);
});
if(matches.length>0)
matches=matches;
else
matches=null;
if(validateSpace(title,"<img src='"+base_url+"themes/admin/images/false.png' alt='false'>",titleinfo) && validateSpace(image,"<img src='"+base_url+"themes/admin/images/false.png' alt='false'>",imageinfo) && validateSpace(imagebig,"<img src='"+base_url+"themes/admin/images/false.png' alt='false'>",imagebiginfo) && validateSpace(imagemobile,"<img src='"+base_url+"themes/admin/images/false.png' alt='false'>",imagemobileinfo) && validateSpace(keywords,"<img src='"+base_url+"themes/admin/images/false.png' alt='false'>",keywordsinfo) && validateSpace(description,"<img src='"+base_url+"themes/admin/images/false.png' alt='false'>",descriptioninfo) && validateSpace(date,"<img src='"+base_url+"themes/admin/images/false.png' alt='false'>",dateinfo)){
var data = {name_img:name_img,type_img:type_img,size_img:size_img,category:category,mycolor: matches,language:language,title:$("#"+title).val(),image:$("#"+image).val(),imagebig:$("#"+imagebig).val(),imagemobile:$("#"+imagemobile).val(),fileupload:$("#"+fileupload).val(),price:$("#"+price).val(),pricesale:$("#"+pricesale).val(),idproduct:$("#"+idproduct).val(),color:$("#"+color).val(),packing:$("#"+packing).val(),cbmpsc:$("#"+cbmpsc).val(),size:$("#"+size).val(),container:$("#"+container).val(),excerpt:$("#"+excerpt).val(),content:val_content,keywords:$("#"+keywords).val(),description:$("#"+description).val(),date:$("#"+date).val(),status:status,position:position};
$(".product-content-create-total").fadeOut(); // hidden div content field register // children div of div class //register-form-center\\
$(".product-content-create").css("height","auto"); // set height/auto after hidden div class //register-form-center\\
$(".product-content-create-alert").html(""); // remove text div alert register // parent div of div id //register-form-content\\
$(".product-content-create-alert").css("margin-bottom","25px");
$(".product-content-create-alert").fadeIn("slow");
$(".product-content-create-alert").html('<img src="'+base_url+'themes/admin/images/loader.gif" alt="loader">');
$.ajax({
url: admin_url +"product/create",
type: "POST",
data: data,
cache: false,
success: function(html) {
console.log(html);
}
});
}else{
return false;
}
});
});
That seem many code, so, I hope anyone can be help me.
Updated:
Here my code of form include submit button:
<form enctype="multipart/form-data" name="form-product-create" method="post">
<input type="file" id="image_list" name="image_list[]" multiple>
<input type="button" name="btnproductcreateclick" value=" " id="btn-product-create-click" style="margin-left:119px;" class="form-btn-create-click" />
</form>
HTML
<form enctype="multipart/form-data" action="upload.php" method="post">
<input name="file[]" type="file" />
<button class="add_more">Add More Files</button>
<input type="button" value="Upload File" id="upload"/>
</form>
Javascript
$(document).ready(function(){
$('.add_more').click(function(e){
e.preventDefault();
$(this).before("<input name='file[]' type='file'/>");
});
});
PHP
for($i=0; $i<count($_FILES['file']['name']); $i++){
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];
if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
echo "The file has been uploaded successfully <br />";
} else{
echo "There was an error uploading the file, please try again! <br />";
}
}
Ajax
$('body').on('click', '#upload', function(e){
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success: function (data) {
alert("Data Uploaded: "+data);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
return false;
})
Source : How to upload multiple files using PHP, jQuery and AJAX
In your code error looks like near,
foreach ($array_new as $key => $value) {
$this->_save_images($value);
if($this->save_images($value)==FALSE){
echo "Faild Upload";
}else{
echo "Upload Success";
}
}
when you call $this->_save_images($value); you don't save file name for uploaded image. $file_name = $this->_save_images($value); and than save this $file_name,
foreach ($array_new as $key => $value) {
$file_name= $this->_save_images($value);
if($this->save_images($file_name)==FALSE){
echo "Faild Upload";
}else{
echo "Upload Success";
}
}
HTML form must be have the “method” attribute with the “post” value. Because the file will only send to the server when the value of the method attribute of the form is post.
<form method="post" name="multiple_upload_form" id="multiple_upload_form" enctype="multipart/form-data" action="upload.php">
<input type="hidden" name="image_form_submit" value="1"/>
<label>Choose Image</label>
<input type="file" name="images[]" id="images" multiple >
<div class="uploading none">
<label> </label>
<img src="uploading.gif"/>
</div>
</form>
PHP
Demo
When I upload image and text by separate form, its work well. But Its not work when I add together.
My form text upload by js and image upload by a php file.
And I think my problem in my form.
If I upload together with js, What change in my js and submit.php, which also add below.
Here is my form code that not work together
<form action="" method="post" id="cmntfrm" enctype="multipart/form-data">
<fieldset id="cmntfs">
<legend class="pyct">
What's your mind
</legend>
<input type="hidden" name="username" size="22" tabindex="1" id="author" value="'.$pname.'"/>
<input type="hidden" name="email" size="22" tabindex="2" id="email" value="'.$email.'"/>
<p><textarea name="comment" rows="10" tabindex="4" id="comment"></textarea></p>
<div id="ajaxuploadfrm">
<form action="uploadpostimg.php" method="post" enctype="multipart/form-data">
<b>Select an image (Maximum 1mb)</b>
<input type="file" name="url" id="url" />
</form>
</div>
<p><input type="submit" name="submit" value="Post comment" tabindex="5" id="submit"/></span></p>
</fieldset>
<input type="hidden" name="parent_id" id="parent_id" value="0" />
<input type="hidden" name="tutid2" id="tutid" value="'.$tutid2.'" />
</form>
js
$(document).ready(function(){
var inputAuthor = $("#author");
var inputComment = $("#comment");
var inputEmail = $("#email");
var inputUrl = $("#url");
var inputTutid = $("#tutid");
var inputparent_id = $("#parent_id");
var commentList = $(".content > comment");
var commentCountList = $("#updatecommentNum");
var error = $("#error");
error.fadeOut();
function updateCommentbox(){
var tutid = inputTutid.attr("value");
//just for the fade effect
commentList.hide();
//send the post to submit.php
$.ajax({
type: "POST", url: "submit.php", data: "action=update&tutid="+ tutid,
complete: function(data){
commentList.prepend(data.responseText);
commentList.fadeIn(2000);
}
});
}
function updateCommentnum(){
var tutid = inputTutid.attr("value");
//just for the fade effect
commentList.hide();
//send the post to submit.php
$.ajax({
type: "POST", url: "submit.php", data: "action=updatenum&tutid="+ tutid,
complete: function(data){
commentCountList.html(data.responseText);
commentList.fadeIn(2000);
}
});
}
function error_message(){
error.fadeIn();
}
function checkForm(){
if(inputAuthor.attr("value") && inputComment.attr("value") && inputEmail.attr("value"))
return true;
else
return false;
}
//on submit event
$("#cmntfrm").submit(function(){
error.fadeOut();
if(checkForm()){
var author = inputAuthor.attr("value");
var url = inputUrl.attr("value");
var email = inputEmail.attr("value");
var comment = inputComment.attr("value");
var parent_id = inputparent_id.attr("value");
var tutid = inputTutid.attr("value");
//we deactivate submit button while sending
$("#submit").attr({ disabled:true, value:"Sending..." });
$("#submit").blur();
//send the post to submit.php
$.ajax({
type: "POST", url: "submit.php", data: "action=insert&author="+ author + "&url="+ url + "&email="+ email + "&comment="+ comment + "&parent_id="+ parent_id + "&tutid="+ tutid,
complete: function(data){
error.fadeOut();
commentList.prepend(data.responseText);
updateCommentbox();
updateCommentnum();
//reactivate the send button
$("#submit").attr({ disabled:false, value:"Submit Comment!" });
$( '#cmntfrm' ).each(function(){
this.reset();
});
}
});
}
else //alert("Please fill all fields!");
error_message();
//we prevent the refresh of the page after submitting the form
return false;
});
});
Submit.php
<?php header('Content-Type: charset=utf-8'); ?>
<?php
include("db.php");
include_once("include/session.php");
switch($_POST['action']){
case "update":
echo updateComment($_POST['tutid']);
break;
case "updatenum":
echo updateNumComment($_POST['tutid']);
break;
case "insert":
date_default_timezone_set('Asia/Dhaka');
echo insertComment($_POST['author'], $_POST['comment'], $_FILES['url']['name'], $_POST['email'], $_POST['tutid'], $_POST['parent_id'], $date = date("M j, y; g:i a"));
break;
}
function updateNumComment($tutid) {
//Detail here
}
function updateComment($tutid) {
//Detail here
}
function insertComment($username, $description, $url, $email, $qazi_id, $parent_id, $date ){
global $dbh;
//Upload image script that not work here when i try together so i took it at separate file and then tried with above form
$output_dir = "comimage/";
$allowedExts = array("jpg", "jpeg", "gif", "png","JPG");
$extension = #end(explode(".", $_FILES["url"]["name"]));
if(isset($_FILES["url"]["name"]))
{
//Filter the file types , if you want.
if ((($_FILES["url"]["type"] == "image/gif")
|| ($_FILES["url"]["type"] == "image/jpeg")
|| ($_FILES["url"]["type"] == "image/JPG")
|| ($_FILES["url"]["type"] == "image/png")
|| ($_FILES["url"]["type"] == "image/pjpeg"))
&& ($_FILES["url"]["size"] < 504800)
&& in_array($extension, $allowedExts))
{
if ($_FILES["url"]["error"] > 0)
{
echo "Return Code: " . $_FILES["url"]["error"] . "<br>";
}
if (file_exists($output_dir. $_FILES["url"]["name"]))
{
unlink($output_dir. $_FILES["url"]["name"]);
}
else
{
$pic=$_FILES["url"]["name"];
$conv=explode(".",$pic);
$ext=$conv['1'];
$user = $_SESSION['username'];
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["url"] ["tmp_name"],$output_dir.$user.".".$ext);
$pic=$output_dir.$user.".".$ext;
$u_imgurl=$user.".".$ext;
}
}
else{echo '<strong>Warning !</strong> File not Uploaded, Check image' ;}
}
//Submit main comment
if ($parent_id == 0){
$username = mysqli_real_escape_string($dbh,$username);
$description = mysqli_real_escape_string($dbh,$description);
$sub = "Comment to";
$query = "INSERT INTO comments_lite VALUES('','$qazi_id','0','$username','$email','$description','','$parent_id','$date')";
mysqli_query($dbh,$query);
} else {
if ($parent_id >= 1){
global $dbh;
$username = mysqli_real_escape_string($dbh,$username);
$description = mysqli_real_escape_string($dbh,$description);
$sub2 = "Reply to";
$query = "INSERT INTO comments_reply VALUES('','$qazi_id','0','$username','$email','$description','','$parent_id','$date')";
mysqli_query($dbh,$query);
}
}
}
?>
on click of submit you can put the code in js you have to make change in the js file
$.post('phpapgename.php',data:jquerydata,function(){
})
in the .php page you can put your query to submit your data.
You cannot have nested form. Try to avoid it and separate out the forms as below. And while submitting any form if you data from other form, create a hidden fields in this form and submit it.
Another suggestion: Since you're working with javascript anyway, outsource the upload-form to an invisible div and make it pop up by clicking/hovering an upload-button or entering the last field of form1 or whatever.
I am currently attempting to send form data via ajax to a php function but it does not appear to be sending it.
This is the HTML Form:
<form onSubmit="return registration();" id="registration_form">
<input type="email" id="email_address" name="email_address" class="inputTextFooter">
<input src="images/go.png" alt="Go" type="submit">
</form>
The AJAX:
function registration(){
if(!$('#email_address').val()){
alert("Empty");
}
else {
$.ajax( {
type: "POST",
url: "includes/registration_check.php",
data: $('#registration_form').serialize(),
success: function( response ) {
alert( response );
}
});
}
return false;
};
Finally the PHP:
$user_id = NULL;
$user_email = isset($_POST['email_address']) ? $_POST['email_address'] : '';
$distinct_query = "SELECT distinct user_email FROM user_emails";
$result=mysql_query($distinct_query, $connection);
$rows = mysql_num_rows($result) - 1;
$distinct_result_array = array();
while($fetched_array = mysql_fetch_assoc($result))
{
$distinct_result_array[] = $fetched_array;
}
for ($loop = 0; $loop <= $rows; $loop++) {
if (in_array($user_email, $distinct_result_array[$loop])) {
echo "Email taken.";
break;
}
else{
}
}
$query = "INSERT INTO user_emails (user_id, user_email) VALUES ('".$user_id."', '".$user_email."')";
mysql_query($query, $connection);
echo "You have successfully registered and will be checked by administration.";
When I send the form it adds to the database but the email field is blank.
Replace
$user_email = isset($_POST['email_address']) ? $_POST['email_address'] : '';
With
if(empty($_POST['email_address']))
{
echo "error";
exit;
}
else
{
$user_email = $_POST['email_address'];
}
And I advice you Use mysqli instead of mysql, also validate user input before inserting into database.
your function should have event.preventDefault() to restrict default form submit action
then only your ajax request get triggerred.
function registration(){
event.preventDefault();
if(!$('#email_address').val()){
alert("Empty");
}
else {
$.ajax( {
type: "POST",
url: "includes/registration_check.php",
data: $('#registration_form').serialize(),
success: function( response ) {
alert( response );
}
});
}
return false;
};
I think you might need to use PHP's parse_str() function to get serialized data
http://php.net/manual/en/function.parse-str.php
I have written a JS script, a CodeIgniter controller and a html form to upload the files via jquery ajax.
It does not uploads files. I have solved all the issues but this last one was beyond my ability.
The AJAX request completes successfully but the codeigniter upload class erros "you did not select a file to upload."
Here is my HTML file and button:
<input type="file" class="form-file" id="file" multiple name="file[]" />
<input value='add picture' type="button" name="file-submit" class="form-submit" id='file-submit'/>
And here is the CodeIgniter controller responsible to upload the files:
class Upload extends CI_Controller
{
function pictures ()
{
$config['upload_path'] = '../uploads/categories/';
$this->load->library("upload", $config);
if(!$this->upload->do_upload("file"))
{
echo $this->upload->display_errors();
}
else
{
echo "Thanks";
}
}
}
And here is the jQuery AJAX script:
$(document).ready(function()
{
var files; // main variable to keep images into it
// lets put the files into a variable
var file_field = $('input[type=file]');
file_field.on('change', appendFiles);
function appendFiles (event)
{
files = event.target.files;
console.log(files);
}
// now attach click event to upload
$('#file-submit').on('click',
function uploadFiles (event)
{
event.preventDefault();
// create a form data
var data = new FormData();
$.each(files, function (key, val)
{
data.append(key, val);
// now all the contents of the files have been assigned to a form-data variable
});
// begin the AJAX
$.ajax({
url : base_path("upload/pictures/"),
data: data,
cache:false,
processData: false,
contentType: false,
success: function(msg)
{
console.log(msg);
},
error : function()
{
console.log("Error");
}
});
});
// form_file
});
Use jQueryFileUpload Plugin:
Download JS: http://yourcareeracademy.com/yca/assets/plugins/ajaxfileupload/ajaxfileupload.js
-view-
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php echo base_url('js/ajaxfileupload.js')?>"></script>
</head>
<body>
<h1>Upload File</h1>
<form method="post" action="" id="upload_file">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="" />
<label for="userfile">File</label>
<input type="file" name="userfile" id="userfile" size="20" />
<input type="submit" name="submit" id="submit" />
</form>
<h2>Files</h2>
<div id="files"></div>
</body>
</html>
--script in page--
$(function() {
$('#upload_file').submit(function(e) {
e.preventDefault();
$.ajaxFileUpload({
url :'./upload/upload_file/',
secureuri :false,
fileElementId :'userfile',
dataType : 'json',
data : {
'title' : $('#title').val()
},
success : function (data, status)
{
if(data.status != 'error')
{
$('#files').html('<p>Reloading files...</p>');
refresh_files();
$('#title').val('');
}
alert(data.msg);
}
});
return false;
});
});
-controller-
public function upload_file()
{
$status = "";
$msg = "";
$file_element_name = 'userfile';
if (empty($_POST['title']))
{
$status = "error";
$msg = "Please enter a title";
}
if ($status != "error")
{
$config['upload_path'] = './files/';
$config['allowed_types'] = 'gif|jpg|png|doc|txt';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);
if (!$this->upload->do_upload($file_element_name))
{
$status = 'error';
$msg = $this->upload->display_errors('', '');
}
else
{
$data = $this->upload->data();
$file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
if($file_id)
{
$status = "success";
$msg = "File successfully uploaded";
}
else
{
unlink($data['full_path']);
$status = "error";
$msg = "Something went wrong when saving the file, please try again.";
}
}
#unlink($_FILES[$file_element_name]);
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
I have used ajaxfileupload upon form submission of my form. This is also for uploading purposes for image files. The image was successfully uploaded, however other data to be saved to database wasn't been included? Because it leaves my table fields blank, so I was thinking the values wasn't been passed to the category_save.php. I also observed that when I used the $.ajax({}) instead of $.ajaxFileUpload, the data were all successfully passed and saved in the database including the image file name but the actual file wasn't been uploaded at all. But when I used the $.ajaxFileUpload instead of $.ajax({}), it just work reverse, the file was uploaded but the values wasn't been saved in the database. What is the wrong with this? Here are my codes:
product_form.php
<form method="post" name="new_category" id="product_category" enctype="multipart/form-data">
<ul class="add_prod">
<li>Category Title:<input type="text" name="category[title]" id="cat_title" value="" placeholder="Title" /> </li>
<li>Category Description:<textarea rows="4" cols="40" name="category[description]"></textarea></li>
<li>Category Image:<input type="file" name="image_file" id="image_file" /></li>
</ul>
</form>
product1.js
$("#product_category").submit( function(){
event.preventDefault();
var data_category = $(this).serialize();
var image = $("#image_file").val();
$.ajaxFileUpload
(
{
type:"post",
url:"../wp-content/plugins/product_form/category_save.php",
secureuri:false,
fileElementId:'image_file',
dataType: "json",
data:data_category + "&image_file=" +image,
success: function (data)
{
if(data.notify == "Success"){
console.log(data.notify);
}
else{
return false;
}
}
}
);
});
product2.js
$("#product_category").submit( function(){
event.preventDefault();
var data_category = $(this).serialize();
var image = $("#image_file").val();
$.ajax({
type: "post",
url: "../wp-content/plugins/product_form/category_save.php",
dataType: "json",
data:data_category + "&image_file=" +image,
success: function(data){
if(data.notify == "Success"){
console.log(data.notify);
}
else{
console.log(data.notify);
}
}
});
});
category_save.php
<?php
//establish connection
$con = mysqli_connect("localhost","root","","ion2_emagi");
//on connection failure, throw an error
if(!$con) {
die('Could not connect: '.mysql_error());
}
$output_dir = "C:/Users/Employees/Dropbox/emagi/wp-content/plugins/product_form/img/";
$file_name = "image_file";
if(isset($_FILES[$file_name]))
{
//Filter the file types , if you want.
if ($_FILES[$file_name]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["image_file"]["tmp_name"],$output_dir. $_FILES["image_file"]["name"]);
}
}
//get the form elements and store them in variables
$category_values = $_POST["category"];
$image_url = basename($_POST["image_file"]);
$image_field = "image_url";
$data = array();
//unset($view_all_info['Password2']);
foreach($category_values as $field => $val){
$data[] = "`".$field."` = '".$val."'";
}
array_push($data,"`".$image_field."` = '".$image_url."'");
$sql = "INSERT INTO wp_product_category SET ".implode(',', $data);
$ret = mysqli_query($con,$sql);
if($ret){
$notification="Success";
}
else{
$notification="Failed";
}
echo json_encode(array('notify'=>$notification));
mysqli_close($con);
data field should have this format:
data: { data_category: data_category, image_file: image_file }
You are trying to pass it as a URL with parameters instead.
Then you have to retrieve it in PHP with POST by the name of the parameter. For example:
$category_values = $_POST["data_category"];