반응형

Image Upload with Preview and Delete

 

http://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/10206834#10206834

 

모바일에서 브라우저로 파일 업로드 할때 미리보기 기능 구현.

 

html5 에서 모바일브라우저상의 <input type="file" >을 지원 할때 사용 가능하다.

 

아래의 Demo가 실행이 되는 브라우저에서는 적용 가능하겠다.

 

Demo : http://plungjan.name/test/previewjq.html

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
   
if (input.files && input.files[0]) {
       
var reader = new FileReader();

        reader
.onload = function (e) {
            $
('#img_prev')
           
.attr('src', e.target.result)
           
.height(200);
       
};

        reader
.readAsDataURL(input.files[0]);
   
}
   
else {
     
var img = input.value;
        $
('#img_prev').attr('src',img).height(200);
   
}
    $
("#x").show().css("margin-right","10px");
}
$
(document).ready(function() {
  $
("#x").click(function() {
    $
("#img_prev").attr("src",blank);
    $
("#x").hide(); 
 
});
});
</script>
<!--[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; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html> 

 

반응형

+ Recent posts