I am Trying to change user image through ajax by overwriting existing image file with new one so how can i show user image without reloading the page.
$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
// $("#message").empty();
// $('#loading').show();
alert('i m clicked');
$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
// $('#loading').hide();
$('#previewing').hide();
// $("#message").html(data);
// $('PreviewImage').attr("src","<?php echo $ImageSource; ?>");
var img = $("#PreviewImage");
img.attr("src","<?php echo $ImageSource; ?>");
// alert(data);
}
});
}));
As per #Deepak comment i have concatenate the timestamp with image source to show new image.
if your image is not getting refreshed add time string after image url like
$timestamp = time(); img.attr("src","<?php echo $ImageSource.'?'.$timestamp;");
Related
I'm trying to add a file upload option to my page.
And I use Ajax for this purpose that sends the file to the server (where it is saved)
And should get back the file name
Everything works well except that when I print what comes back instead of just getting the array I send from the server I also get extra information.
Does anyone know where this supplement comes from? and how I can get rid of it?
here is my ajax:
$("#upload_file").change(function(input){
console.log(" in upload_file");
var file_data = $('#upload_file').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>organizer/save_event_file',
// dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
beforeSend: function(){
$('#progress_spinner').show();
$('body').addClass('disable_body');
},
success: function(response,status){
console.log(response);
},
complete: function(){
$('#progress_spinner').hide();
$('body').removeClass('disable_body');
}
}).fail(function (xhr, status, error) {
alert("error");
});//fail;
});
this is my server function:
enter code here
public function save_event_file(){ // to add check and prommision
$filePath = $_FILES['file']['tmp_name'];
$type=$_FILES['file']['type'];
//adding to the name with the current date in the end
$date = new DateTime();
$name = substr($_FILES['file']['name'],0,strpos($_FILES['file']['name'],'.')). '__' .$date>format('d.m.y').substr($_FILES['file']['name'],strpos($_FILES['file']['name'],'.'));
$data = array('file' => curl_file_create($filePath, $type, $name));
$response = $this->organizer_model->save_file($data); // save the file with the new name
$result = array('alertcode'=>1,'response'=>$response,'name'=>$name);
echo json_encode($result);
}
this is what I expect to be the response:
{"alertcode":1,"response":true,"name":"old db function__21.03.21.txt"}
this is the real response (The other part is the " {"alertcode":1}" in the beginning):
{"alertcode":1}{"alertcode":1,"response":true,"name":"old db function__21.03.21.txt"}
I have no problem cutting this information and then making a parse as follows:
var ans = JSON.parse(response.substring(response.indexOf('{"alertcode',10),response.length));
But I want to understand where this is coming from - in case this addition changes - and then it will cut the string badly.
Hi I have a Php page with html and ajax request.
I am taking screenshot of that html data and saving thar screenshot on server using ajax, my problem is I need to send multiple screenshot of that page without reloading but html must be change as per records.
<?php
if(count($users) > 0)
{ ?>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
HERE IS HTML MUST CHANGE AS PER USER, I CANT RELOAD
THE PAGE AGAIN AND AGAIN AS THIS IS A CRON JOB
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<script type='text/javascript'>
function screenshot(){
html2canvas(document.getElementById('testing')).then(function(canvas)
{
//document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg',
'image/octet-stream');
// AJAX request
$.ajax({
url: 'ajax/savePNG.php',
type: 'post',
data: {image: base64URL, user_id:"<?php echo $valuevb['user_id'];
?>"},
success: function(data){
console.log('Upload successfully');
}
});
});
}
</script>
I am trying to send form data with attachment to php via ajax.
My code is :
var company_name = $('#companyname').val();
var company_type = $('#companytype').val();
var industry_sector = $('#industrysector').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var logo = $("#logo").prop("files")[0];
var company_description = $('#company_description').val();
var password = $('#password').val();
var rePassword = $('#rePassword').val();
var data = {
company_name: company_name,
company_type: company_type,
industry_sector: industry_sector,
email: email,
mobile: mobile,
logo: logo,
company_description: company_description,
password: password
}
$.ajax({
type: "POST",
async: false,
data: {companyregister: data},
url: "ajax/loginvia.php",
processData: false, // tell jQuery not to process the data
contentType: false,
beforeSend:function(){
},
i am getting empty data to php controller. i tried in many ways, im unable to resolve the issue.
With simple ajax it is some complex to perform you can use ajaxForm for this. It is easy to implement. Here is plugin url : http://jquery.malsup.com/form/
It is so easy to implement have a look at this.
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
$('#loading').hide();
$("#message").html(data);
}
});
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
Here's my code:
$.ajax( {
type: "POST",
url: "/script.php",
data: { "action" : "importData" },
cache: false,
async: true,
success: function() {
window.location.href = "/next-page";
}
} );
When a user lands on this page, ajax will trigger the php script which takes about 15 seconds to complete. Rather than having the user wait for the script to complete and then redirect them, I want to get some type of confirmation that the script has been triggered, then redirect the user without waiting for the entire script to complete. The results of the script isnt used until many minutes later in the workflow.
Is this possible? How to do so?
$.ajax() returns the XMLHttpRequest instance:
var xhr = $.ajax({
type: 'POST',
url: '/script.php',
data: {action: 'importData'},
cache: false,
success: function(){
location = '/next-page';
}
});
/* to test if problem is jQuery remove this line and take comments out
var px = xhr.onreadystatechange;
*/
xhr.onreadystatechange = function(){
//if(px)px();
if(xhr.readyState === 3 && xhr.status === 200){ // look at Properties -> https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
// do stuff here with xhr.readyState less than 4
}
}
Valid XMLHttpRequest.readyState property values can be found here.
Note that if you redirect the user, JavaScript on the current page stops. The page that your user is redirected to may have it's own JavaScript.
I have a browse button by which user can browse file upto 100 mb. But the problem is, it is uploading the attch file when user submitting the form. And it is not showing in anywhere that how much file uploaded. I want to show it with a progressbar.
U can visit my site http://historikindia.com/contact_us.php.
Please help me to do it. It is now sending attachment to my email. but i need to show user the progressbar otherwise they may think that it is not responding properly (for large file upload).
Here is the code from ajax uploader which updated a status bar. You need to have an html5 progress bar in your html page for it to work.
function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}
}
$('#btnupload').click(function(){
var formData = new FormData(document.getElementById('fileupload'));
$.ajax({
url: 'upload.php', //server script to process data
type: 'POST',
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
}
return myXhr;
},
//Ajax events
beforeSend: function (e) { return true; },
success: function (json) { return true; },
error: function (json) { return false; },
// Form data
data: formData,
dataType: "json",
//Options to tell JQuery not to process data or worry about content-type
cache: false,
processData: false
});
});
html5 progress bar looks like this
<progress value="1" max="100"></progress>