Created
December 19, 2012 14:31
-
-
Save RobQuistNL/4337047 to your computer and use it in GitHub Desktop.
Code to make an invisible file-upload selector, and post it to an iframe, working in Chrome, FireFox AND Internet Explorer 9
Instead of an submit button and file selector, we now have a simple DIV, that, once clicked, opens the file selection screen, and once you have selected a file, uploads it to an iFrame.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- This is just a snippet, be sure to include jQuery (i used 1.8.3) | |
The <{TAGS}> are my own template parsers' tags. Replace them as you want. | |
PROBLEM: | |
When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form. | |
If you click the file-input via your own mouse (what we don't want), IE will let you submit the form. | |
Solution (partly thanks to Rudie @ Stackoverflow, http://stackoverflow.com/users/247372/rudie , http://hotblocks.nl/): | |
Make a label for the input in IE. If you click it, it will force a click on the input field - and IE will accept that (dumbass IE thinks user clicked the input field, hah) | |
So in that label we'll put our own styled DIV. | |
Next problem was, this doesn't work in FF. So we made a simple (possible nasty) browser check, and based on the browser we'll show a different button. | |
Solution is right here. Tested in: | |
Win 7 x64 | |
FireFox 13.01 | |
Chrome 23.0.1271.97 m | |
IE9 in regular IE9 mode | |
More tests / additions to code are MORE than welcome! | |
--> | |
<div class="avatar_div"><img id='profilePic' src="<{PROFILE_PICTURE}>" width="199" height="199" /></div> | |
<form method='POST' action='<{ROOT_URL}>/ajax/new_profile_picture_upload' enctype='multipart/form-data' target='submit-iframe' id='fileform'> | |
<div id="btnholder"></div> | |
<script type="text/javascript"> | |
if ($.browser.msie) { //Its ugly but it does the trick. | |
$("#btnholder").html('<label for="file" ><div class="button_upload">Upload Picture</div></label>'); | |
} else { | |
$("#btnholder").html('<div class="button_upload" onClick="$(\'#file\').click();">Upload Picture</div>'); | |
} | |
</script> | |
<input type="file" class="file" id="file" name="file" value="Upload picture" onchange="submit_form();" /> <!-- Is being removed by CSS --> | |
<input type="submit" name="submitBtn" id="submitBtn" style="display:none;" /> | |
</form> | |
<iframe id="submit-iframe" name='submit-iframe' style='display:none;'></iframe> | |
<script type="text/javascript"> | |
function submit_form() { | |
document.getElementById("fileform").submit(); | |
window.oldpicture = $('#profilePic').attr('src'); | |
$('#profilePic').attr('src','<{AJAX_LOADER_IMAGE}>'); | |
} | |
$("#submit-iframe").load(function() { | |
var myIFrame = document.getElementById('submit-iframe'); | |
var responseText = myIFrame.contentWindow.document.body.innerHTML; | |
if( responseText.indexOf( "SUCCESS" ) !== -1 ) { | |
$("#profilePic").attr("src",responseText.replace("SUCCESS", "")); | |
} else { | |
if (parseInt(responseText) < 50000) { | |
alert('Unknown error while uploading image: '+responseText); | |
} | |
if (parseInt(responseText) == 50001) { | |
alert('You are only allowed to upload the following filetypes: JPEG, JPG, PNG, GIF'); | |
} | |
if (parseInt(responseText) == 50002) { | |
alert('The file you uploaded was larger than <{MAX_UPLOAD_PROFILE_IMAGE_SIZE}> MB. Try resizing the image.'); | |
} | |
$('#profilePic').attr('src',window.oldpicture); | |
} | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//This uses my own framework, but the idea is there. | |
require "../../application/init.php"; //Autoload everythin' | |
$login = new Login(); | |
if ($login->isLoggedin()) { | |
if ($_FILES["file"]["error"] > 0) { | |
echo "Error: " . $_FILES["file"]["error"] . "<br>"; | |
die; | |
} else { | |
if ($_FILES["file"]["type"]!='image/jpeg' && $_FILES["file"]["type"]!='image/jpg' && $_FILES["file"]["type"]!='image/png' && $_FILES["file"]["type"]!='image/gif') { | |
echo '50001'; | |
die; | |
} | |
if (($_FILES["file"]["size"] / 1024)>$GLOBALS["CONFIG"]["MAX_PROFILE_UPLOAD_SIZE"]) { | |
echo '50002'; | |
die; | |
} | |
//Download the avatar and save it in our temporary storage | |
$tempFile = new tempStorage(file_get_contents($_FILES["file"]["tmp_name"])); | |
$tempUser = $login->getCurrentUserInfo(); //Fetch our user object | |
//Generate the new image | |
$image = new Image(); | |
$image->setOwner($tempUser->getId()); //We're the owner | |
$image->createImage($tempFile->getFilename()); //Square | |
$tempFile->destroy(); //Delete the temp file | |
$tempUser->profilePicId = $image->getId(); //Set this image as our profile picture | |
$tempUser->save(); //Save | |
echo 'SUCCESS' . $image->getUrl(480); | |
die; | |
} | |
} else { | |
echo '401'; | |
die; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div.button_upload { | |
color:white; | |
text-align:center; | |
padding-top:15px; | |
margin-left:33px; | |
margin-top:2px; | |
width: 199px; | |
height: 35px; | |
background: url('../images/button.png') 0 0 no-repeat; | |
cursor: pointer; | |
} | |
.loaderimage { | |
width:100px; | |
margin:0 auto; | |
margin-top: 100px; | |
} | |
#profilePic { | |
width:199px; | |
height:199px; | |
} | |
input.file { | |
position: absolute; | |
left: -9999px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
with IE8 doesnt work :(