js实现按钮加背景图片常用方法
投稿：shichen2014
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js实现按钮加背景图片常用方法,罗列了js事件触发控制背景图片、css样式控制以及图片按钮三种方法,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js实现按钮加背景图片常用方法。分享给大家供大家参考。具体实现方法如下：
代码如下:&input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/&
代码如下:&input type="button" value="提交" style="background:url(图片地址) no-border:text-indent:-2000width:100height:30"&
就是用图片按钮，即：
代码如下:&input name="submit" type="image" value=" " src="jb51.jpg" /&
希望本文所述对大家基于javascript的web程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js实现图片上传并正常显示
作者：天空还下着雪
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js实现图片上传并正常显示，我们经常遇到上传照片的情况，如何实现图片上传，本文为大家进行揭晓
项目经常会用到头像上传，那么怎么实现呢？
首先是HTML布局：
&label for="thumbnail" class="col-md-3 control-label"&缩略图&/label&
&div class="col-md-6"&
&input type="file" class="form-control" id="thumbnail" name="thumbnail"&
jquery方式，IE不支持，但IE会获得绝对的上传路径信息：
function getObjectURL(file) {
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
$('#thumbnail').change(function() {
var eImg = $('&img /&');
eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this-&input
$(this).after(eImg);});
网上找一份可用的代码非常不易，经过不断的筛选总结才得出兼容所有的文件上传显示
&form action='' method='post' name='myform'&
&input type='file' id='iptfileupload' onchange='show()' value='' /&
&img src='1.jpg' alt='' id='img' /&
&script type="text/javascript"&
function getPath(obj,fileQuery,transImg) {
var imgSrc = '', imgArr = [], strSrc = '' ;
if(window.navigator.userAgent.indexOf("MSIE")&=1){ // IE浏览器判断
if(obj.select){
obj.select();
var path=document.selection.createRange().
alert(path) ;
obj.removeAttribute("src");
imgSrc = fileQuery.
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.setAttribute("src",transImg);
obj.style.filter=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');"; // IE通过滤镜的方式实现图片显示
throw new Error('File type Error! please image file upload..');
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
// alert(fileQuery.value) ;
imgSrc = fileQuery.
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.src = fileQuery.
throw new Error('File type Error! please image file upload..') ;
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
var file =fileQuery.files[0];
var reader = new FileReader();
reader.onload = function(e){
imgSrc = fileQuery.
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.setAttribute("src", e.target.result) ;
throw new Error('File type Error! please image file upload..') ;
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
// alert(e.target.result);
reader.readAsDataURL(file);
function show(){
//以下即为完整客户端路径
var file_img=document.getElementById("img"),
iptfileupload = document.getElementById('iptfileupload') ;
getPath(file_img,iptfileupload,file_img) ;
更多精彩内容请参考专题，和进行学习。
希望本文所述对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具