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
