手机端html图片预览效果,移动端 手机端 HTML5上传图片预览 wap

HTML5上传图片预览

/*body{padding:0px;margin:0px;}*/

#note{position:absolute;width:300px;padding:20px;background:#eee;border:1px solid #ccc;z-index:9999;display:none;}

请选择图片文件：JPG/GIF

图片大小必须小于200K

+

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()

$("#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()

$("#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*200){

$('#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(" X");

$(".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()

$("#img0").attr("width", $(document.body).width());

}else{

$("#img0").attr("width", img.width);

}*/

//alert(img.width);

//}

}