数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > HTML教程 > HTML5

移动端 手机端 HTML5上传图片预览 wap

2014-11-13 10:52 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:HTML5 上一篇:HTML5表单及其验证 下一篇:Canvas API 之 drawImage

移动端 手机端 HTML5上传图片预览

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>HTML5上传图片预览</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  6. <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script> 
  7. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
  8. <style> 
  9. /*body{padding:0px;margin:0px;}*/ 
  10. #note{position:absolute;width:300px;padding:20px;background:#eee;border:1px solid #ccc;z-index:9999;display:none;} 
  11. </style> 
  12. </head> 
  13. <body> 
  14. <h3>请选择图片文件:JPG/GIF</h3> 
  15. <div id="note">图片大小必须小于200K</div> 
  16. <form name="form0" id="form0" > 
  17. <input type="file" name="file0" id="file0" multiple="multiple" style="display:none" accept="image/jpeg,image/png,image/gif,image/bmp" /><br><div class="img" style="position:relative; width:80px; height:60px;"><img src="" id="img0" style="position:absolute"> 
  18.  <a href="javascript:;" class="add" onClick="file0.click()" style="display: block;width: 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> 
  19. </form> 
  20. <script>     
  21.  
  22. function orient() { 
  23.  
  24. if (window.orientation == 0 || window.orientation == 180) { 
  25. $("body").attr("class", "portrait"); 
  26. //orientation = 'portrait'
  27. var img = new Image(); 
  28.                     img.src = $("#img0").attr("src"); 
  29.  
  30.   
  31.                     if($(document.body).width()<img.width){ 
  32.                         $("#img0").attr("width", $(document.body).width()); 
  33.                     }else{ 
  34.                         $("#img0").attr("width", img.width); 
  35.                     } 
  36. //return false; 
  37. else if (window.orientation == 90 || window.orientation == -90) { 
  38. $("body").attr("class", "landscape"); 
  39. //orientation = 'landscape'
  40.                     var img = new Image(); 
  41.                     img.src = $("#img0").attr("src"); 
  42.  
  43.   
  44.                     if($(document.body).width()<img.width){ 
  45.                         $("#img0").attr("width", $(document.body).width()); 
  46.                     }else{ 
  47.                         $("#img0").attr("width", img.width); 
  48.                     } 
  49. //return false; 
  50.  
  51.  
  52.  
  53.  
  54.  
  55. $(window).bind( 'orientationchange', function(e){ 
  56. orient(); 
  57. }); 
  58.  
  59.  
  60. $("#file0").change(function(){ 
  61.     var objUrl = getObjectURL(this.files[0]) ; 
  62.     var obj_file = document.getElementById("file0"); 
  63.     filesize = obj_file.files[0].size; 
  64.     if(filesize>1024*200){ 
  65.         $('#note').css({display:'block', top:'-100px'}).animate({top: '+100'}, 500, function(){  
  66.             setTimeout(out, 3000);  
  67.         });  
  68.         function out(){  
  69.         $('#note').animate({top:'0'}, 500, function(){  
  70.         $(this).css({display:'none', top:'-100px'});  
  71.         });  
  72.         }  
  73.         $('#file0').val(''); 
  74.         return false; 
  75.     } 
  76.     console.log("objUrl = "+objUrl) ; 
  77.     if (objUrl) { 
  78.         $("#img0").attr("src", objUrl).after(" <i class=\"icon icon-clear\" style=\"position:absolute;width:78px;text-align:right;cursor:pointer;font-family: Verdana, Arial, Helvetica, sans-serif\">X</i>"); 
  79.         $(".add").css("display","none"); 
  80.         $(".icon-clear").click(function(){ 
  81.             $(".add").css("display",""); 
  82.             $('#file0').val(''); 
  83.             $("#img0").attr("src", ""); 
  84.             $("#img0").removeAttr("width").removeAttr("height"); 
  85.             $("#img0").next("i").remove(); 
  86.             //$("#file0").after($("#file0").clone().val(""));   
  87.             //$("#file0").remove();   
  88.         }); 
  89.         var img = new Image(); 
  90.         img.src = objUrl
  91.             img.onload = function(){  
  92.                 //if(img.complete==true) 
  93.                 //{  
  94.                     //console.log(img.width); 
  95.                     //alert($(document.body).width()); 
  96.   
  97.                     if(img.width/img.height>4/3){ 
  98.                     if(img.width>80){ 
  99.                         $("#img0").attr("width", "80"); 
  100.                     }else{ 
  101.                         $("#img0").attr("width", img.width); 
  102.                     } 
  103.                     }else{ 
  104.                     if(img.height>60){ 
  105.                         $("#img0").attr("height", "60"); 
  106.                     }else{ 
  107.                         $("#img0").attr("height", img.height); 
  108.                     } 
  109.                     } 
  110.                     /*if($(document.body).width()<img.width){ 
  111.                         $("#img0").attr("width", $(document.body).width()); 
  112.                     }else{ 
  113.                         $("#img0").attr("width", img.width); 
  114.                     }*/ 
  115.                     //alert(img.width); 
  116.                 //}  
  117.             }    
  118.  
  119.         /*img.src =objUrl ; 
  120.         var w = img.width; 
  121.         var h = img.height; 
  122.         alert(w);*/ 
  123.     } 
  124. }) ; 
  125. //建立一個可存取到該file的url 
  126. function getObjectURL(file) { 
  127.     var url = null ;  
  128.     if (window.createObjectURL!=undefined) { // basic 
  129.         url = window.createObjectURL(file) ; 
  130.     } else if (window.URL!=undefined) { // mozilla(firefox) 
  131.         url = window.URL.createObjectURL(file) ; 
  132.     } else if (window.webkitURL!=undefined) { // webkit or chrome 
  133.         url = window.webkitURL.createObjectURL(file) ; 
  134.     } 
  135.     return url ; 
  136. </script> 
  137. </body> 
  138. </html> 
 <!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;width: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="multiple" style="display:none" accept="image/jpeg,image/png,image/gif,image/bmp" /><br><div class="img" style="position:relative; width:80px; height:60px;"><img src="" id="img0" style="position:absolute">
<a href="javascript:;" class="add" onClick="file0.click()" style="display: block;width: 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*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(" <i class=\"icon icon-clear\" style=\"position:absolute;width: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>

 

小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。