2012年7月22日 星期日
html5圖片預覽
<body id="body" onload="">
<input id="fileInput" type="file" multiple onchange="handleFiles(this.files)">
<br />
<img id="bd" style="position:absolute; top:20px; left:0px;"></img>
</body>
<script type="text/javascript">
/*<![CDATA[*/
function $(id){
return document.getElementById(id);
}
function displayImage(container,dataURL){
container.src = dataURL;
}
function handleFiles(files){
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var reader = new FileReader();
reader.onload = function(e){
displayImage($('bd'),e.target.result);
}
reader.readAsDataURL(file);
}
var body = $('body') ;
var input = $('fileInput');
body.removeChild(input);
}
//]]>
</script>
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言