Skip to content

Instantly share code, notes, and snippets.

@BrendonKoz

BrendonKoz/preview_image_upload.php

Last active December 26, 2015 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BrendonKoz/7103249 to your computer and use it in GitHub Desktop.
Save BrendonKoz/7103249 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
preview_image_upload.php
<?php
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Image Preview Pre-Upload</title>
<style type="text/css">
form div.upload label { font-weight:bold; display:block; margin-bottom:0.25em; }
img.file-preview { border:3px solid #000; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=file]').change(function(e) {
if(typeof FileReader == "undefined") return true;
var elem = $(this);
var file = e.target.files[0];
if (file.type.match('image/jpeg')) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
previewImg = $('.file-preview');
previewImg.attr('src', e.target.result);
};
})(file);
reader.readAsDataURL(file);
}
});
});
</script>
</head>
<body>
<form method="post" action="">
<div class="upload">
<img src="missing.jpg" width="110" height="110" class="file-preview" />
<label>Select a File:</label>
<input type="file" name="file">
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment