天气预报安卓代码（安卓天气预报app）

本篇文章给大家谈谈点击预览大图代码，以及点击预览大图代码不显示对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、php图片上传前预览怎么实现！！
• 2、图片预览js代码在谷歌浏览器下异常
• 3、手机端页面有很多张图片，怎么实现当我点击某一张图片时放大预览再点击缩小恢复！求代码！
• 4、基于javascript代码实现通过点击图片显示原图片
• 5、html页面里面如何实现点击小图放大查看大图
• 6、如何用java实现图片预览功能，求代码

php图片上传前预览怎么实现！！

1.先创建一个file表单域，我们需要用它来浏览本地文件。

form name="form1" id="form1" method="post" action="upload.php"

input type="file" name="file1" id="file1" /

/form

2.试下效果：　

判断文件类型：

当用户选择了一个图片文件时，希望他能马上看到这张图片的缩略图，以便他能确认没有把自己的光屁股照片当作头像传到服务器上^_^。

在预览之前还得先判断一下用户选择的是不是一个图像文件，如果他想用一个.rar文件做头像的话我们也需要礼貌地提醒一下。

form name="form2" id="form2" method="post" action="upload.php"

input type="file" name="file2" id="file2"

onchange="preview()" /

/form

Javascript函数实现，注意使用DOM方法getElementById来访问对象。不要再使用form

和input的name属性来访问对象了，只有IE才这么干。script type="text/javascript"

function preview2(){

var x = document.getElementById("file2");

if(!x || !x.value) return;

if(x.value.indexOf(".jpg")0

x.value.indexOf(".jpeg")0

x.value.indexOf(".gif")0){

alert("您选择的似乎不是图像文件。");

}else{

alert("通过");

}

}

/script

3.试下效果：

这里有一个问题，如果用户选择了名为“fake.jpg.txt”的文件，这段脚本仍旧会认为这是一个合法的图像文件。一个可行的解决方案是先 把文件名转换成小写，再取文件路径的最后4到5位，判断一下文件的扩展名是否确为支持的图像文件扩展名。不过这种方案略显笨拙，也没有什么美感可言， 我们换一种方案：用“正则表达式”来判断文件扩展名。

script type="text/javascript"

function preview3(){

var x = document.getElementById("file3");

if(!x || !x.value) return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

alert("通过");

}else{

alert("您选择的似乎不是图像文件。");

}

}

/script

4.看看效果（可以自己创建一个“fake.jpg.txt”文件试试）：

回到这段脚本上来，即使你还看不懂正则表达式那两行，但整段脚本的美感还是很明显的：简洁、直接、语义流畅，这与Web标准关于XHTML的要求是一致的，与Web设计师或开发者天生的“完美”主义也是一致的。

jjww一大段之后，转入重点——预览图片

预览功能的基本设计思路是很清晰的：创建一个img元素，再把文件域的value值赋值给img

元素的src属性。form name="form4" id="form4" method="post" action="#"

input type="file" name="file4" id="file4"

onchange="preview4()" /

img id="pic4" src="" alt="图片在此显示" width="120"/

/form

script type="text/javascript"

function preview4(){

var x = document.getElementById("file4");

var y = document.getElementById("pic4");

if(!x || !x.value || !y) return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

y.src = "" + x.value;

}else{

alert("您选择的似乎不是图像文件。");

}

}

/script

5.试下效果：

如果用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许显示一个用户的本地 图像文件。不知道为什么要这么做，个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文 件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，并 不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。

让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：

在Firefox的地址栏中输入“about:config”

继续输入“security.checkloaduri”

双击下面列出来的一行文字，把它的值由true改为false

然后你可以再试试上面预览，everything works well！可惜的是并不能要求所有的用户都去修改这个值（更不用说修改的过程还挺麻烦），所以毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。

用DOM来创建对象

在上面的XHTML代码中，为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持 Javascript，不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，就需要在“运行时”再生成这个img对 象，途径还是DOM。

form name="form5" id="form5" method="post" action="#"

input type="file" name="file5" id="file5"

onchange="preview5()"/

/form

script type="text/javascript"

function preview5(){

var x = document.getElementById("file5");

if(!x || !x.value) return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

var y = document.getElementById("img5");

if(y){

y.src = '' + x.value;

}else{

var img=document.createElement('img');

img.setAttribute('src',''+x.value);

img.setAttribute('width','120');

img.setAttribute('height','90');

img.setAttribute('id','img5');

document.getElementById('form5').appendChild(img);

}

}else{

alert("您选择的似乎不是图像文件。");

}

}

/script

6.试下效果：

这样就相对比较完美了。DOM和正则表达式一样，都是“包你不悔”的实 用技术，如果你希望更多了解、深入学习、或者顺利实践Web标准，DOM是不可或缺的。从本人最近的体会来说，Javascript+DOM+CSS蕴 藏着强大的能量，就看怎么释放它了。

7.最后帖上JQUERY的上传预览代码：

dehtml xmlns=""

head id="Head1"

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

script type="text/javascript" src=""/script

script language="javascript"

$(function(){

var ei = $("#large");

ei.hide();

$("#img1").mousemove(function(e){

ei.css({top:e.pageY,left:e.pageX}).html('img style="border:1px solid gray;" src="' + this.src + '" /').show();

}).mouseout( function(){

ei.hide("slow");

})

$("#f1").change(function(){

$("#img1").attr("src",""+$("#f1").val());

})

});

/script

style type="text/css"

#large{position:absolute;display:none;z-index:999;}

/style

/head

body

form name="form1" id="form1"

div id="demo"

input id="f1" name="f1" type="file" /

img id="img1" width="60" height="60"

/div

div id="large"/div

/form

/body

/htmlde

图片预览js代码在谷歌浏览器下异常

现在的高版本浏览器都不允许访问本地文件，你能看到的原因是你没有发布出去，你是直接打开这个文件的，本地html访问本地文件是可以的，但是远程html访问本地文件就不行。

如果你以域名（如：localhost/xxx.html或者127.0.0.1/xxx.html）来访问你就会发现你根本无法看到。

手机端页面有很多张图片，怎么实现当我点击某一张图片时放大预览再点击缩小恢复！求代码！

求代码，不能帮助你什么

给你思路

点击时给图片添加一个class，例如active，

每次点击判断是否该dom含有active，class，

如果有就移除class，

如果没有添加这个class，

而你的css，用这个class渲染图片放大并居中等等你想要的效果，

可以加上transition起到平滑动画的效果

基于javascript代码实现通过点击图片显示原图片

废话不多说了，直接给大家贴js实现点击图片显示原图片的代码，具体代码如下所示：

function

DrawImage(ImgD){

var

image

=

new

Image();

image.src=ImgD.src;

var

width

=

$(ImgD).attr("width");

var

height

=

$(ImgD).attr("height");

if(width

100

height80){

ImgD.width=100;

ImgD.height=80;

ImgD.alt=image.width+"×"+image.height;

}else{

if(image.width0

image.height0){

flag=true;

if(image.width300

||

image.height200){

ImgD.width=image.width/2;

ImgD.height=image.height/2;

ImgD.alt=image.width+"×"+image.height;

}else{

ImgD.width=image.width;

ImgD.height=image.height;

ImgD.alt=image.width+"×"+image.height;

}

}

}

}

下面分享一段关于js实现上传图片及时预览

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title图片上传本地预览/title

style

type="text/css"

#preview{width:260px;height:190px;border:1px

solid

#000;overflow:hidden;}

#imghead

{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

/style

script

type="text/javascript"

//图片上传预览

IE是用了滤镜。

function

previewImage(file)

{

var

MAXWIDTH

=

260;

var

MAXHEIGHT

=

180;

var

div

=

document.getElementById('preview');

if

(file.files

file.files[0])

{

div.innerHTML

='img

id=imghead';

var

img

=

document.getElementById('imghead');

img.onload

=

function(){

var

rect

=

clacImgZoomParam(MAXWIDTH,

MAXHEIGHT,

img.offsetWidth,

img.offsetHeight);

img.width

=

rect.width;

img.height

=

rect.height;

//

img.style.marginLeft

=

rect.left+'px';

img.style.marginTop

=

rect.top+'px';

}

var

reader

=

new

FileReader();

reader.onload

=

function(evt){img.src

=

evt.target.result;}

reader.readAsDataURL(file.files[0]);

}

else

//兼容IE

{

var

sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

file.select();

var

src

=

document.selection.createRange().text;

div.innerHTML

=

'img

id=imghead';

var

img

=

document.getElementById('imghead');

img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src

=

src;

var

rect

=

clacImgZoomParam(MAXWIDTH,

MAXHEIGHT,

img.offsetWidth,

img.offsetHeight);

status

=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);

div.innerHTML

=

"div

id=divhead

style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'/div";

}

}

function

clacImgZoomParam(

maxWidth,

maxHeight,

width,

height

){

var

param

=

{top:0,

left:0,

width:width,

height:height};

if(

widthmaxWidth

||

heightmaxHeight

)

{

rateWidth

=

width

/

maxWidth;

rateHeight

=

height

/

maxHeight;

if(

rateWidth

rateHeight

)

{

param.width

=

maxWidth;

param.height

=

Math.round(height

/

rateWidth);

}else

{

param.width

=

Math.round(width

/

rateHeight);

param.height

=

maxHeight;

}

}

param.left

=

Math.round((maxWidth

-

param.width)

/

2);

param.top

=

Math.round((maxHeight

-

param.height)

/

2);

return

param;

}

/script

/head

body

div

id="preview"

img

id="imghead"

width=100

height=100

border=0

src='%=request.getContextPath()%/images/defaul.jpg'

/div

input

type="file"

onchange="previewImage(this)"

/

/body

/html

html页面里面如何实现点击小图放大查看大图

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：

div {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;}

3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。

4、点击小图后，成功显示了大图。

如何用java实现图片预览功能，求代码

使用两种不同的方法实现图片预览功能

Java代码

BODY

script language="javascript"

function ShowImage(path){

document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;

}

function test(){

document.all.showimg.src=document.all.file1.value;

}

/script

INPUT style="Z-INDEX: 101; LEFT: 232px; POSITION: absolute; TOP: 272px" type="file"onchange="ShowImage(this.value)"

div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px"

input type="file" id="file1" onchange="test()"br/

img id="showimg" style="width:200px;height:200px;"

/BODY

点击预览大图代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于点击预览大图代码不显示、点击预览大图代码的信息别忘了在本站进行查找喔。