Image preview before upload and crop
Question
I'm in the middle of making a form which allows the admins to upload an image. This image I would like them to be able to preview before they upload it. It will show as a specific size and they'll be able to click on the image to open up a in-page window to crop.
JQuery Image Crop: http://jsfiddle.net/UydpR/2/
My Code, sorry I tried to make a fiddle but could not get it to work!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Image Test</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
I also wish for something default to show instead of the no image found logo. I'll make one to say 'No Image Uploaded' or whatnot.
Thank you in advanced for any help, Blessed Be, Tim
1 answers
solution1
0 2013-12-28 19:36:17
this is an example for loading image in web browser for preview. i hope will help you
<script>
function readImage(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#img').attr( "src", e.target.result );
//$('#base').text( e.target.result ); //this is the base64 encoded image
var img = e.target.result;
};
FR.readAsDataURL( input.files[0] );
}
}
</script>
<input type='file' id="asd" onchange="readImage( this )"/>
<img id="img" src="" />
<div id="base"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.