上传和裁剪之前的图像预览

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/ jQuery图像裁剪： 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 谢谢您的帮助，蒂姆，祝福您

Answer 1

this is an example for loading image in web browser for preview. 这是在Web浏览器中加载图像以进行预览的示例。 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>

上传和裁剪之前的图像预览

问题描述

1 个解决方案

解决方案1
0 2013-12-28 19:36:17

上传和裁剪之前的图像预览

问题描述

1 个解决方案

解决方案1 0 2013-12-28 19:36:17

解决方案1
0 2013-12-28 19:36:17