I did an ajax upload with php.Everything wiil be perfect in firefox.
But when i test it in chrome browser its not working correctly.
That means it displays this :
This is my ajax upload code:
$(function(){
var cntUp = 0;
var btnUpload=$('#upload0');
var status=$('#status');
var state='left_front';
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
data: {saleid: $("#hid_saleid").val(),imag_state:state,custom:$('#custom').val()},
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
alert('Only JPG, PNG or GIF files are allowed');
return false;
}
this.setData({
'saleid': $("#hid_saleid").val(),
'imag_state':'left_front',
'custom':$('#custom').val()
});
status.text('Uploading...');
},
onComplete: function(file, response){
var array_data=response.split('***');
var fname= array_data[1];
var rand=Math.floor((Math.random()*10)+1);
var saleid = $("#hid_saleid").val();
var custom = $('#custom').val();
//On completion clear the status
status.text('image uploaded');
cntUp++;
//console.log(cntUp);
//Add uploaded file to list
if (response.toLowerCase().indexOf("success") >= 0 ) {
var image='<img src="uploads/'+saleid+'/'+fname+'" alt="" width="131px" height="125px"/>';
$("#img0").html(image);
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
//alert('error');
}
}
});
});
This is the html code:
<div class="brwse_box">
<div style="float:left;" id="upload0">
<h3>Left Front</h3>
<img src="images/upload.gif" />
</div>
<div style="float:right; width:131; height:125" id="img0">
<?php if($l_ft==''||$l_ft==NULL) { ?>
<img src="images/no-photo-lft-frnt.jpg" id="bg"/>
<?php } if($l_ft!=''||$l_ft!=NULL){?>
<img src="uploads/<?php echo $var_sid;?>/<?php echo $l_ft;?>" id="bg" width="131px" height="125px"/>
<?php }?>
</div>
</div><!--browse_box ENDS-->
How can i solve this?
It displaying image in firefox.but in chrome not displaying image instead of that displaying html of image tag.
EDIT:
This is the value return in fname variable:
left_front.jpg<div id=isChromeWebToolbarDiv" style="display:none"></div>
It seems you have a problem in the src string.
Check it for escape characters...
I'd say it's possible that fname contains quotes...
EDIT:
What "isChromeWebToolbarDiv"?
fname = fname.replace(new RegExp("<div id=isChromeWebToolbarDiv(.*)</div>"),'');
or simply
fname = fname.replace(new RegExp("<div(.*)</div>"),'');
after your EDIT on question, it came to know that
is coming in src
This is caused by a Chrome extension called DVDvideosoftTB. It appears to append the above HTML to file upload requests. You can easily disable it:
Click on the Wrench icon
Click "Tools"
Click "Extensions"
Disable DVDvideosoftTB
Related
hi guys i been trying to send a post value using ajax
this is my pages:
I have a page that is the modal modal_image.php with this code:
var image;
function addImage() {
$.ajax({
url:'registration.php',
data:{image:document.getElementById('output').src},
type:'POST',
success:function (data){
if(!data.error){
document.getElementById('userImage').src=document.getElementById('output').src;
image=document.getElementById('userImage').src;
$("#try").text(image);
}
}
});
}
and this my registration.php page:
<p><?php echo $_POST['image'];?></p>
<p id="try"></p>
i have showed u a limit of the code...
when I open the modal and upload the photos the 'p' element with the id=try is working and I can see the image src
but the first p with the post value I see an error
Consider the following code.
function addImage(source) {
$.post('registration.php', {
image: source
}, function(data) {
if (!data.error) {
$('#userImage').attr("src", source);
$("#try").text($('#userImage').attr("src"));
}
});
}
addImage($("#output").attr("src"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="output" src="https://dummyimage.com/200x100/ccc/fff.png&text=TEST" />
<p id="try"></p>
You can pass in the URL String that you want to Add into your Function. This way, it can be a bit more dynamic and you now have the data easily available to the whole function.
Below i have mentioned AJAX script, I wanted to append id from database for each photo when I upload.But when using "var m='_'+x;" in the below script it doesnt get the database id for the record(WHen i print it,It appears blank).So how to retrieve database id for a row and append in AJAX script?The photo gets uploaded and stores in the mentioned folder with the id.But in that page while i check page source it shows .The Id doesnt get loaded in middle.
$(function(){
var btnUpload=$('#me');
var mestatus=$('#mestatus');
var files=$('#files');
new AjaxUpload(btnUpload, {
action: 'uploadPhoto.php',
name: 'uploadfile',
onSubmit: function(file, ext)
{
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
mestatus.text('Only JPG, PNG or GIF files are allowed');
return false;
}
mestatus.html('<img src="ajax-loader.gif" height="16" width="16" align="left">');
},
onComplete: function(file, response){
// alert(response)
//On completion clear the status
mestatus.text('');
//On completion clear the status
files.html('');
//Add uploaded file to list
if(response==="success")
{
var x=file;
var m='<?=$data44[id]?>_'+x;
document.getElementById('img_name').value=x;
$('<li></li>').appendTo('#files').html('<img src="photo/demophoto_'+m+'" alt="" height="110px" width="95px" /><br />').addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
Uploadphoto.php
include_once("db.php");
$sel="select usnno from usn where id='$_SESSION[lgkey]'";
$qry=mysql_query($sel) or die(mysql_error());
$row=mysql_fetch_array($qry);
$sel44=mysql_query("select * from reg_form where usn='$row[usnno]' ");
$data44=mysql_fetch_array($sel44);
$uploaddir = './photo/';
$file = $uploaddir ."demophoto_".$data44['id'].'_'.basename($_FILES['uploadfile']['name']);
$file_name= "demophoto_".$data44['id'].'_'.$_FILES['uploadfile']['name'];
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error";
}
Please change your code from:
var m='<?=$data44[id]?>_'+x;
to the following:
var m='<?=$data44["id"]?>_'+x;
Just add double quotation marks between the "id".
Ttry this
var m="<?php echo $data44['id']; ?>_"+x; or var m='<?php echo $data44[id]; ?>_'+x;
instead of var m='<?=$data44[id]?>_'+x;
I create a gallery with Jquery and it worked fine, later on I decided to get the file from directory and not from tag.
I used AJAX and PHP, I get the images into the gallery div but the css class not influence the the gallery to make it work.
html
<div id="gallery-holder">
<!-- <img src="images/mainGallery/main-galery1.jpg" class="active" >
<img src="images/mainGallery/main-galery2.jpg" >
<img src="images/mainGallery/main-galery3.jpg" >
-->
</div>
Jquery
$(document).ready(function(){
$.ajax({
url: 'mainGallery.php',
success: function(data){
$('#gallery-holder').html(data);
}
}).error(function(){
alert('an alert occored');
}).success(function(){
// alert('success');
}).complete(function(){
// alert('complete');
});
slideSwitch();
});
function slideSwitch() {
var $gallery = $('#gallery-holder'),
$active = $gallery.find('img:visible'),
$next = $active.next().length ? $active.next() : $gallery.find('img').first();
setTimeout(function() {
$active.fadeOut('slow');
$next.fadeIn('slow', slideSwitch);
}, 2000);
};
PHP
<?php
$i=0;
foreach(glob('./images/mainGallery/*.*' ) as $filename){
if ($i==0){
echo '<img src="'.$filename.'" class="active">';
}
else echo '<img src="'.$filename.'">';
$i++;
}
?>
It's look like the HTML is not recognize the Active class form the AJAX.
No errors in the console.
please help...
thanks,
Cfir.
Move your function call inside the success callback, otherwise it will run before the elements have been added:
$(document).ready(function(){
$.ajax({
url: 'mainGallery.php',
success: function(data){
$('#gallery-holder').html(data);
slideSwitch(); //Initialize slider after elements are loaded into the DOM
}
);
});
Inferring from this: IE ignores styles for dynamically loaded content, I'd suggest you try and return something like <img src="images/mainGallery/main-galery1.jpg" id="displayimg"> from your PHP, and then do:
$('#gallery-holder').html(data);
$('#displayimg').addClass("active");
Try it.
In my site I use 10 file upload boxes. I want to get a file upload box name when I click on the box.
That means first upload box, second upload box, third upload box etc...
So if I click on the first upload box then I want to get name of that file upload box.
How can i get the upload button name in ajax function.
This is my ajax code:
$(function(){
var countfile = 10;
var strfileid = '';
for(i=1;i<=countfile;i++){
var btnUpload=$('#browse'+i);
var adinfoid=$('#adinfoid').val();
new AjaxUpload(btnUpload, {
action: '<?php echo base_url()?>index.php/post/upload_editgalleryimage/'+adinfoid,
name: 'uploadfile',
onSubmit: function(file, ext){
alert(btnUpload.Name);
var photoplancnt=$('#photoplancnt').val();
var hidcountimg=$('#hidcountimg').val();
if(parseInt(hidcountimg)>=parseInt(photoplancnt)){
$("#photoerror").html('maximum '+photoplancnt +' files are allowed');
$("#photoerror").css('display','block');
return false;
}
if (! (ext && /^(jpg|png|jpeg|gif|JPG|PNG|JPEG|GIF)$/.test(ext))){
$("#photoerror").html('Only JPG, PNG, GIF, files are allowed');
$("#photoerror").css('display','block');
return false;
}
},
onComplete: function(file, response){
if(response){
$(".upload_main_div").html('');
$(".upload_main_div").html(response);
var insid = $("#hiddengalidnow").val();
calltoloadimage(insid);
/*$("#galimageicon").attr("src",response);
$("#galimageicon").attr("width",55);
$("#galimageicon").attr("height",55);*/
//$("#mainimageicon1").attr("src",response);
}else{
alert("error");
}
}
});
}
});
It will alert 'browse12' at all time.
Html code:
<?php
for($i=1;$i<=10;$i++){
?>
<input type="button" id="browse<?php echo $i;?>" name ="browse<?php echo $i;?>" class="browse_media" value="Browse">
<?php
}
?>
Finally
alert(this._button.name);
Generally:
$('input[type=file]').on('click', function() {
var name = $(this).attr('name'); // or this.name
});
for you case:
btnUpload.attr('name');
Maybe this will help
$("input[id^=browse]").click(function(){
var strBrowseName = $(this).attr('name');
// Or no var, if it has already been defined
});
This is my code:
$(function(){
var btnUpload=$('#browse');
var adinfoid=$('#adinfoid').val();
new AjaxUpload(btnUpload, {
action: '<?php echo base_url()?>index.php/post/upload_editmainimage/'+adinfoid,
name: 'uploadfile',
onSubmit: function(file, ext){
$("#progressid").css("display","block");
if (! (ext && /^(jpg|png|jpeg|gif|JPG|PNG|JPEG|GIF)$/.test(ext))){
$("#mainphotoerror").html('Only JPG, PNG, GIF, files are allowed');
$("#mainphotoerror").css('display','block');
return false;
}
},
onComplete: function(file, response){ //alert(response);
if(response){
/*$(".main_image").html('');
$(".main_image").html(response);*/
$("#progressid").css("display","none");
$("#image"+<?php echo $mainimage->intphotoid; ?>).css('display','block');
$("#imagemainicon"+<?php echo $mainimage->intphotoid; ?>).css('display','block');
$("#mainimageicon").attr("src",response);
$("#mainimageicon").attr("width",55);
$("#mainimageicon").attr("height",55);
$("#mainimageicon1").attr("src",response);
}else{
alert("error");
}
}
});
});
<input type="button" id="browse" class="browse_media" value="Browse">
<div id="progressid" class="displayNone">
<img src="//s3.amazonaws.com/s3.racingjunk.com/102/images/procesing.gif" width="117" height="20" />
Uploading.....
</div>
When I click on the browse button I need to show a progress bar for 5 minutes. After 5 minutes the progress bar will hide or not be shown. After the progress bar hides the image will then display.
How can I do this? Is this possible?
Try this
http://www.9lessons.info/2012/04/file-upload-progress-bar-with-jquery.html
i haven't tried it myself but this night work
You have to do like this:--
<div id="popup1" class="popup_block">
<?php echo $this->Html->image('ajax-loader2.gif'); ?>
<h4>Processing Please Wait...! </h4>
</div>
In script:-
Using Jquery
//Fade in Background
jQuery('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
jQuery('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
var popID = 'popup1';
//var popWidth = 500;
//Fade in the Popup and add close button
jQuery('#' + popID).css({ 'width': '250' });
for time you can give in Your Jquery or do like this:--
window.setInterval(function() {
// this will execute every 5 minutes => show the alert here
}, 300000);
You cannot achieve that using the code you have shared. You see, you need to know how much data has been sent to the server so that you can show actual progress.
How People do it?
1. They used third party plugins like java Applet or Flash to upload files
2. They use an animated picture to show progress while the file is being sent (not actual progress).
3. They use HTML 5.
For real time feedback on how much file has been sent to the server you will need either 3rd party plugin (if you are on an older browser) or HTML5 XMLHttpRequest Object
See html5 file upload with upload status/Progress bar.