JS当地照片浏览

摘要: 当今部位: 新闻资讯管理中心 编程设计 文章正文JS当地照片浏览公布 浏览频次:6132 【关掉此页】完成挑选当地照片后浏览作用,就可以为网页页面提色很多,又能防止客户误提交。...

当今部位: 新闻资讯管理中心 编程设计 文章正文 JS当地照片浏览 公布 浏览频次:6132 【关掉此页】

完成挑选当地照片后浏览作用,就可以为网页页面提色很多,又能防止客户误提交。的确是一个非常值得强烈推荐的作用,可是现阶段访问器销售市场错乱,欠缺统一规范,促使这一作用在开发设计起來令人有够头痛。忙乎了一下午,可是結果其实不开朗,只检测根据了IE6/IE7/IE8/IE9/FireFox/Chrome这几种访问器,Opera的不正确操纵台无法显示不正确,不知道道如何搞的,因此临时先忽视它吧。对于其他访问器,自己电脑上上沒有安裝。其次,即使安裝大量访问器都不将会所有适配。

来看处理适配难题的唯一方法便是应用Flash了。可是想要Flash完成当地照片浏览作用也是有非常大局限性性,例如网页页面合理布局、照片种类、照片规格限定及其提交插口这些。

贴编码的情况下原本想开启线上调节作用,可是IE9针对架构内获得文档域内的详细地址适用的并不是非常好,好像它觉得有跨域行为,因此只贴编码,有兴趣爱好的朋友拷贝编码自身运作检测吧,编码以下:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title 当地照片浏览 /title 
 style type="text/css" 
table {
 table-layout: fixed;
 padding: 0 6px;
 font-size: 12px;
#picWrap {
 padding: 4px;
 width: 120px;
 height: 90px;
 overflow: hidden;
 color: #aaa;
 text-align: center;
 border: 1px solid #ddd;
 background-color: #f3f3f3;
 /style 
 script type="text/javascript" 
var isIE=/msie/i.test(navigator.userAgent);
var isFF=/firefox/i.test(navigator.userAgent);
function getValue(o){
 var str=window.webkitURL window.webkitURL.createObjectURL(o.files[0])||window.URL window.URL.createObjectURL(o.files[0])||null;
 if(str)return str;
 o.select();
 o.blur();
 str=document.selection.createRange().text;
 document.selection.empty();
 return str;
function drawImg(){
 var o=document.getElementById('picWrap').firstChild,picSize=document.getElementById('picSize'),W=o.offsetWidth,H=o.offsetHeight,w,h;
 if(arguments.length==0 W==1 H==1){setTimeout('drawImg()',50);return;}
 if(W/H =120/90){
 if(W 120){w=120,h=(H*120)/W}else{w=W,h=H}
 }else{
 if(H 90){h=90,w=(W*90)/H}else{w=W,h=H}
 picSize.innerHTML='照片具体规格:'+W+'×'+H;
 o.style.width=w+'px';
 o.style.height=h+'px';
 if(arguments.length==0){o.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod='scale';
 }else{
 arguments[0].width=w;
 arguments[0].height=h;
function checkPic(obj){
 var v=obj.value,V=getValue(obj),picWrap=document.getElementById('picWrap'),str='图 片 预 览';
 document.getElementById('picSize').innerHTML='';
 if(v==''){
 picWrap.innerHTML=str;
 return;
 if(/^.+\.jpg$/i.test(v.toLowerCase())){
 picWrap.innerHTML='';
 if(isIE){
 var div=document.createElement('div');
 div.style.cssText='width:1px;height:1px;margin:auto';
 picWrap.appendChild(div);
 div.style.cssText+=";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')";
 try{
 div.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src=V;
 }catch(e){
 obj.outerHTML=obj.outerHTML;
 picWrap.innerHTML=str;
 alert('失效的照片文档');
 return;
 setTimeout('drawImg()',50);
 }else{
 var img=new Image();
 img.onload=ImgOK;
 img.src=V;
 }else{
 (isIE||window.opera)?obj.outerHTML=obj.outerHTML:obj.value='';
 picWrap.innerHTML=str;
 alert('照片文件格式歪斜确!挑选jpg文件格式的文档');
 function ImgOK(){
 if(img.width==0){
 alert('失效的照片文档');
 obj.value='';
 picWrap.innerHTML=str;
 return;
 picWrap.appendChild(img);
 drawImg(img);
 /script 
 /head 
 body 
 table border="0" align="center" cellpadding="0" cellspacing="0" 
 td width="300" align="right" input name="" type="file" onchange="checkPic(this)" / /td 
 td id="picWrap" 图 片 预 览 /td 
 td width="300" id="picSize" /td 
 /tr 
 /table 
 /body 
 /html 
文中标识:网页页面设计方案, JavaScript 有关阅读文章: 自身写的一个JS照片展现程序2012-09-26ASP的NextRecordset和GetRows方式2012-09-22cssforms表格自定肌肤2012-09-21JS侧滑门实际效果2012-09-18DIV+CSS取名标准2012-09-15


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:在线免费抠图