在HTML里用图标来做一个查找（file）按钮。怎么做？

html-css023

在HTML里用图标来做一个查找（file）按钮。怎么做？,第1张

这个不怎么难啊，看下面代码

<html>

<head>

<title>File</title>

<style type="text/css">

#infile {visibility: hidden}

input {font-family: Verdanafont-size: 9pt}

</style>

<script language="JavaScript">

function changeName()

{

var f = document.getElementById("filename")

f.value = document.getElementById("infile").value

}

function openFile()

{

document.getElementById("infile").click()

}

</script>

</head>

<body>

<input type="file" id="infile" onChange="changeName()" />

<input type="text" id="filename" size="50" maxlength="50" />

<a href="javascript: openFile()"><img src="***.jpg" border="0" /></a>

</body>

</html>

原理：

点击图片链接时，触发打开文件框，如果file框里的内容改变时，把file框里的内容传到文本框。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{margin: 0pxpadding: 0pxlist-style: nonetext-decoration: none}/*通配符，个人习惯*/

#btn{background: url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)width: 540pxheight: 258px}

</style>

</head>

<body>

<h1>button按钮的背景是图片</h1>

<button id="btn"></button>

</body>

</html>

尝试下面的代码：

<%@ page language="java" contentType="text/htmlcharset=utf-8"

pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>放到桌面，发送快捷方式到桌面</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>

</head>

<body>

<center>

<h2>放到桌面，发送快捷方式到桌面(IE浏览器会显示放到桌面这个按钮，其他浏览器不会显示放到桌面这个按钮)</h2>

<input id="toDesktopButton" type="button" value="放到桌面" onclick="toDesktop(location.href, '软件名称')">

</center>

</body>

<script type="text/javascript">

//将快捷方式发送到桌面

function toDesktop(sUrl, sName) {

try {

var WshShell = new ActiveXObject("WScript.Shell")

var oUrlLink = WshShell.CreateShortcut(WshShell.SpecialFolders("Desktop")

+ "\\" + sName + ".url")

oUrlLink.TargetPath = sUrl

oUrlLink.Save()

alert("成功创建桌面快捷方式!")

} catch (e) {

alert("当前IE安全级别不允许操作或您的浏览器不支持此功能！")

}

}

//判断是否是IE浏览器

function isIE() {

if (!!window.ActiveXObject || "ActiveXObject" in window) {

// alert("是IE浏览器")

return true

} else {

// alert("不是IE浏览器")

return false

}

}

//整个页面加载完之后执行函数

window.onload = function() {

var result = isIE()

if (!result) {

//不是IE浏览器

//获得按钮元素

var toDesktopButtonNode = document.getElementById("toDesktopButton")

//隐藏按钮

toDesktopButtonNode.style.display = "none"

}

}

</script>

</html>