Bill Sullivan
asked on
Javascript working in IE 11, but not in later browsers
I have a simple javascript code that works fine in IE 11, but of course no one uses that anymore. It does not operate at all in Chrome, Safari, Edge, etc. No errors, just doesn't do what it is supposed to. I've attached the section of the file, as well as the "inc" file that performs the task. Any help on what needs to be changed for later browsers would be much appreciated!
Here is the code that calls the function:
and here is the "inc" file:
I've also added a screen shot from IE 11 with what it is supposed to look like with one image selected. as well as what it looks like in Chrome
Here is the code that calls the function:
<table width="95%" cellpadding="3" cellspacing="3" border="0" align="center" class="blueborder">
<tr>
<td colspan="3" class="subcontent">
<div class="subcontent" style="line-height:40px;">Use the following "Browse" button to select and upload multiple images.</div>
<input id="fileInput" name="fileInput" type="file"/>
<div style="padding-top:10px;"><a href="javascript:$j('#fileInput').uploadifyUpload();">Upload Files</a> | <a href="javascript:$j('#fileInput').uploadifyClearQueue();">Clear Queue</a></div>
<div id="fileQueue" style="padding-bottom:5px;"></div>
<div class="greycontent" style="line-height:25px;">[Note: Select multiple files using Shift or CTRL key]</div>
</td>
</tr>
<tr>
<td colspan="6" style="padding-bottom:10px;" class="subcontent">
If you are having a problem in uploading the image using the above option, click <a href="client_imageupload.php?ClientFile=<?php echo $clientFile;?>" style='cursor:pointer;'><u>here</u></a> to upload the image.
</td>
</tr>
</table>
and here is the "inc" file:
if (!empty($_FILES)) {
//File used to create Thumbnail Image
include_once('../../process/clients/thumbnail.inc.php');
$clientFile = $_REQUEST['clientFile'];
$databaseName = $database;
$uploaddir = "../../images/clientfile_pictures/large_image/".$databaseName."/";
//$largeImageName = eregi_replace("[^a-z0-9.]", "_", $_FILES["Filedata"]['name']);
$largeImageName = preg_replace("/[^a-z0-9.]/i", "_", $_FILES["Filedata"]['name']);
$largeImage = $clientFile."_".$largeImageName;
$full_file_path = $uploaddir . $largeImage;
//get the original name of the file from the clients machine
$filename = stripslashes($_FILES["Filedata"]['name']);
//get the extension of the file in a lower case format
$extension = substr(strrchr($filename, '.'), 1);
$extension = strtolower($extension);
if(file_exists($full_file_path)) {
$largeImage = $clientFile."_".uniqid(rand()).".".$extension;
}
$full_file_path = $uploaddir . $largeImage;
$copied = move_uploaded_file($_FILES["Filedata"]['tmp_name'], $full_file_path);
chmod($full_file_path, 0644);
$thumbImage = NULL;
$thumbImageName = preg_replace("/[^a-z0-9.]/i", "_", $_FILES["Filedata"]['name']);
$thumbImage = $clientFile."_".$thumbImageName;
$thumb = new Thumbnail($full_file_path);
$h=120;
$w=120;
$thumb->resize($h,$w);
$thumbUploadDir = "../../images/clientfile_pictures/thumb_image/".$databaseName."/";
$thumb_file_path = $thumbUploadDir . $thumbImage;
if(file_exists($thumb_file_path)) {
$thumbImage = $clientFile."_".uniqid(rand()).".".$extension;
}
else {
$thumbImage = $clientFile."_".$largeImageName;
}
$thumb_file_path = $thumbUploadDir . $thumbImage;
$thumb->save("../../images/clientfile_pictures/thumb_image/".$databaseName."/".$thumbImage);
if($copied) {
$ipAddress = "10.1.10.93";
$uploadedDate = date('Y-m-d H:i:s');
$slctImage = "SELECT count(*) as featuredImage FROM ".TABLE_CLIENTFILEPICTURES." WHERE ClientFile = '".$clientFile."' AND FeaturedImage='1'";
$rs = NULL;
$rs = db_return_array(db_execute_query($slctImage));
$featuredImagedb = $rs['featuredImage'];
if($featuredImagedb > 0) {
$featureImageValue = 0;
}
else {
$featureImageValue = 1;
}
$query = "INSERT INTO ".TABLE_CLIENTFILEPICTURES." (ClientFile,LargeImage,ThumbImage,FeaturedImage,UploadedDate,ImageCaption,IPAddress) VALUES('$clientFile','$largeImage','$thumbImage','$featureImageValue','$uploadedDate','','$ipAddress')";
db_execute_query($query) or die ('Query failed: ' . db_error());
$pictureID = db_return_new_id();
}
//Once the images are uploaded print the pcitureid, by using this we can get the latest uploaded image details
//This Id is retrived in "onComplete" function in "client_multipleimageupload.php" page
echo $pictureID;
}
I've also added a screen shot from IE 11 with what it is supposed to look like with one image selected. as well as what it looks like in Chrome
ASKER
Here is the javascript snippet at the top of the page, but it doesn't look like what you showed me!
<script type="text/javascript" src="../js/jquery.uploadif y.v2.1.0.m in.js"></s cript>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(functio n() {
var ext = '*.jpg;*.jpeg;*.png;*.gif' ;
var recentIds = '';
$j("#fileInput").uploadify ({
'queueSizeLimit' : '100',
'sizeLimit' : '10485760',
'uploader' : 'uploadify.swf',
'script' : '../process/clients/client _multiplei mageupload .inc.php',
'scriptData' : {'clientFile': '<?php echo $clientFile;?>','session_i d' : '<?php echo session_id();?>'},
'cancelImg' : '../images/cancel.png',
'fileDesc' : 'Please upload only .jpg, .jpeg, .png, .gif files',
'fileExt' : ''+ext+'',
'queueID' : 'fileQueue',
'folder' : '../images/clientfile_pict ures/large _image/<?p hp echo $database;?>',
'multi' : true,
onComplete : function(event, queueID, fileObj, response, data){
recentIds+=response+',';
},
onAllComplete : function(event, data){
var pictureID = recentIds.replace(/^[\s]+/ ,'').repla ce(/[\s]+$ /,'').repl ace(/[\s]{ 2,}/,'');
window.location.href='<?ph p echo URL_BASE;?>clients/client_ addimageca ption.php? clientFile =<?php echo $clientFile;?>&pictureID=' +pictureID ;
}
});
});
</script>
<script type="text/javascript" src="../js/jquery.uploadif
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(functio
var ext = '*.jpg;*.jpeg;*.png;*.gif'
var recentIds = '';
$j("#fileInput").uploadify
'queueSizeLimit' : '100',
'sizeLimit' : '10485760',
'uploader' : 'uploadify.swf',
'script' : '../process/clients/client
'scriptData' : {'clientFile': '<?php echo $clientFile;?>','session_i
'cancelImg' : '../images/cancel.png',
'fileDesc' : 'Please upload only .jpg, .jpeg, .png, .gif files',
'fileExt' : ''+ext+'',
'queueID' : 'fileQueue',
'folder' : '../images/clientfile_pict
'multi' : true,
onComplete : function(event, queueID, fileObj, response, data){
recentIds+=response+',';
},
onAllComplete : function(event, data){
var pictureID = recentIds.replace(/^[\s]+/
window.location.href='<?ph
}
});
});
</script>
The first thing that jumps out at me is that you have a couple of settings that should have a numeric value but instead have a string:
'queueSizeLimit' : '100',
'sizeLimit' : '10485760',
Should be:
'queueSizeLimit' : 100,
'sizeLimit' : 10485760,
(No quotes around the numbers)
I'm not sure if uploadify has code to detect string values and parse them, but if it doesn't, then that could cause the plug-in not to initialize correctly.
'queueSizeLimit' : '100',
'sizeLimit' : '10485760',
Should be:
'queueSizeLimit' : 100,
'sizeLimit' : 10485760,
(No quotes around the numbers)
I'm not sure if uploadify has code to detect string values and parse them, but if it doesn't, then that could cause the plug-in not to initialize correctly.
If there's still a problem after that, then send me a private message with the url where I can see the issue.
ASKER
Thanks, I just sent it. I hope that helps.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Open in new window
My guess is that either you've got the wrong ID in that little snippet (maybe case-sensitive or something) or some other Javascript error there, or else you are calling the snippet too early.
If you want to make sure the document is fully loaded before it tries to initialize the plugin, you can use document.ready:
Open in new window
If none of the above seems relevant, then enable your Developer Tools (hit F12), go to the Console tab, and then refresh your page and see if there are any Javascript errors that show up. There might be something interfering with the rest of the script.