<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style>
/*body{padding:0px;margin:0px;}*/
#note{position:absolute;300px;padding:20px;background:#eee;border:1px solid #ccc;z-index:9999;display:none;}
</style>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<div id="note">图片大小必须小于200K</div>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple style="display:none" accept="image/jpeg,image/png,image/gif,image/bmp" /><br><div class="img" style="position:relative; 80px; height:60px;"><img src="" id="img0" style="position:absolute">
<a href="javascript:;" class="add" onClick="file0.click()" style="display: block; 78px;height: 58px;background: #e1e5ed;border: dashed #a2a7ad 1px;font-size: 40px;font-weight: bold;color: #fff;line-height: 58px;text-align: center;overflow: hidden; text-decoration:none; position:absolute">+</a></div>
</form>
<script>
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$("body").attr("class", "portrait");
//orientation = 'portrait';
var img = new Image();
img.src = $("#img0").attr("src");
if ($(document.body).width() < img.width) {
$("#img0").attr("width", $(document.body).width());
} else {
$("#img0").attr("width", img.width);
}
//return false;
} else if (window.orientation == 90 || window.orientation == -90) {
$("body").attr("class", "landscape");
//orientation = 'landscape';
var img = new Image();
img.src = $("#img0").attr("src");
if ($(document.body).width() < img.width) {
$("#img0").attr("width", $(document.body).width());
} else {
$("#img0").attr("width", img.width);
}
//return false;
}
}
$(window).bind('orientationchange',
function(e) {
orient();
});
$("#file0").change(function() {
var objUrl = getObjectURL(this.files[0]);
var obj_file = document.getElementById("file0");
filesize = obj_file.files[0].size;
if (filesize > 1024 * 200000) {
$('#note').css({
display: 'block',
top: '-100px'
}).animate({
top: '+100'
},
500,
function() {
setTimeout(out, 3000);
});
function out() {
$('#note').animate({
top: '0'
},
500,
function() {
$(this).css({
display: 'none',
top: '-100px'
});
});
}
$('#file0').val('');
return false;
}
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl).after(" <i class="icon icon-clear" style="position:absolute;78px;text-align:right;cursor:pointer;font-family: Verdana, Arial, Helvetica, sans-serif">X</i>");
$(".add").css("display", "none");
$(".icon-clear").click(function() {
$(".add").css("display", "");
$('#file0').val('');
$("#img0").attr("src", "");
$("#img0").removeAttr("width").removeAttr("height");
$("#img0").next("i").remove();
//$("#file0").after($("#file0").clone().val(""));
//$("#file0").remove();
});
var img = new Image();
img.src = objUrl;
img.onload = function() {
//if(img.complete==true)
//{
//console.log(img.width);
//alert($(document.body).width());
if (img.width / img.height > 4 / 3) {
if (img.width > 80) {
$("#img0").attr("width", "80");
} else {
$("#img0").attr("width", img.width);
}
} else {
if (img.height > 60) {
$("#img0").attr("height", "60");
} else {
$("#img0").attr("height", img.height);
}
}
/*if($(document.body).width()<img.width){
$("#img0").attr("width", $(document.body).width());
}else{
$("#img0").attr("width", img.width);
}*/
//alert(img.width);
//}
}
/*img.src =objUrl ;
var w = img.width;
var h = img.height;
alert(w);*/
}
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</body>
</html>