3、javascript+CSS+Html5实现图片预览（本地和网络图片）

2023-03-02 08:53:03html-css016

3、javascript+CSS+Html5实现图片预览（本地和网络图片）,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Transform</title>

.test-box{

width:600px

margin:50px auto}

.pic{

-webkit-transition:all 1s ease-in-out

transition:all 1s ease-in-out

cursor:pointer}

.top-pic{

position:absolute

transform:scale(0,0)}

.test-box:hover .top-pic{

-webkit-transform-origin:top right

-webkit-transform:scale(1,1)}

.test-box:hover .bot-pic{

-webkit-transform:scale(0,0)

-webkit-transform-origin:bottom left

opacity: .5

-webkit-transform:rotate(120deg)

-webkit-transform-origin:bottom left

}

</style>

</head>

<body>

</div>

</body>

</html>

随便写了几个效果，没有用到JS，不过要用到JS只要把触发事件替换掉上面的hover就行了，比如：

$(".button").click(function () {

。。。

})

这里面用到CSS3，所以请不要用IE11以下的低版本浏览器，不然你啥都看不见

这个并不是那么简单做出来的，一般情况下会加一段iframe代码，模拟ajax上传。

代码很简单，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>By：DragonDean</title>

//下面用于图片上传预览功能

function setImagePreview(avalue) {

var docObj=document.getElementById("doc")

var imgObjPreview=document.getElementById("preview")

if(docObj.files &&docObj.files[0])

{

//火狐下，直接设img属性

imgObjPreview.style.display = 'block'

imgObjPreview.style.width = '150px'

imgObjPreview.style.height = '180px'

//imgObjPreview.src = docObj.files[0].getAsDataURL()

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0])

}

else

{

//IE下，使用滤镜

docObj.select()

var imgSrc = document.selection.createRange().text

var localImagId = document.getElementById("localImag")

//必须设置初始大小

localImagId.style.width = "150px"

localImagId.style.height = "180px"

//图片异常的捕捉，防止用户修改后缀来伪造图片

try{

localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"

localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc

}

catch(e)

{

alert("您上传的图片格式不正确，请重新选择!")

return false

}

imgObjPreview.style.display = 'none'

document.selection.empty()

}

return true

}

</script>

</head>

<body>

<tbody>

<tr>

</td>

</tr>

<tr>

<td align="center" style="padding-top:10px"><input type="file" name="file"

id="doc" style="width:150px" onchange="javascript:setImagePreview()"></td>

</tr>

</tbody>

</table>

</body>

</html>

预览图片

预览功能的基本设计思路：创建一个img元素，再把文件域的value值赋值给img元素的src属性。

</form>

<scrīpt type="text/javascrīpt">

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 = "file://localhost/" + x.value

}

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

}

</scrīpt>

试下效果：

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

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

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

继续输入“security.checkloaduri”

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

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

用DOM来创建对象

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

</form>

<scrīpt type="text/javascrīpt">

function preview5(){

var x = document.getElementById("file5")

if(!x || !x.value)