반응형
반응형

Pickadate.js — Responsive date & time picker

Pickadate.js is a responsive, mobile-friendly jQuery date & time input picker. Just insert one line of code and get a date picker with a popup calendar.

pickadate.js

Homepage: http://amsul.ca/pickadate.js/
GitHub: https://github.com/amsul/pickadate.js

 

pickadate.js

The mobile-friendly, responsive, and lightweight
jQuery date & time input picker. 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

JavaScript: an overview of the regular expression API  (0) 2013.08.08
[jQuery] Caching jQuery selections in an object  (0) 2013.08.08
[jQuery] Sticky-kit: A sticky element jQuery plugin  (0) 2013.08.07
[WEB] HTML5, CSS, javascript 게임  (0) 2013.08.06
[jQueyr] Best jQuery Plugins of the Week [27th July - 2nd August]  (0) 2013.08.06
반응형

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> 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Meteor - nodejs . meteor  (0) 2013.03.20
[jQuery] Collection of jQuery Drag and Drop Plugins  (0) 2013.03.20
[jquery] 13 Very Useful jQuery Modal Plugins  (0) 2013.03.18
[javascript] Holder.js  (0) 2013.03.11
[javascript] css3 video player , html5, javascript  (0) 2013.03.07
반응형

* input 이 hidden 이거나 포커스 없이 value()가 변경되는 것을 체크할때 사용.

.change() 로 확인안될때.

  
  survey('input[name=hidden 객체]', function(){ 
        console.log('changed');
  }); 
  
 

        function survey(selector, callback) {
            var input = $(selector);
            var oldvalue = input.val();
            setInterval(function(){
               if (input.val()!=oldvalue){
                   oldvalue = input.val();
                   callback();
               }
            }, 100);
         }

 

 

 

http://stackoverflow.com/questions/12580761/hidden-input-change-event

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[APP] < 하이브리드앱 개발방법 >  (0) 2013.01.16
[javascript] corona SDK  (0) 2013.01.16
[jQuery] 40+ Free and Fresh jQuery Plugins and Tutorials  (0) 2013.01.07
[javascript] 자바스크립트 - http://angularjs.org/  (0) 2013.01.07
[jQuery] 50 Most Useful jQuery Plugins from 2012  (0) 2012.12.24

+ Recent posts

티스토리툴바