JQuery实现选择桌面照片,替换为网页背景【以及解决上传文件路径问题】
1、上传文件出现问题；
2、选择桌面文件，获取input标签的值，出现一个假的路径，这是由于浏览器的保护机制。
3、解决这个方法，自然可以取消浏览器的保护机制【*******但这不可取，所以此篇重点就出来了】
重点：4、解决获取input的file值问题。
重点js代码：
//修改背景图片的方法
function changBackground(){
/**
* 文件预览
*/
var fileObj = document.getElementById("file_road").files[0];
if (window.createObjcectURL != undefined) {
url = window.createOjcectURL(fileObj);
alert(url);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(fileObj);
alert(url);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(fileObj);
}
//这里是将选择的图片加入想要加入的id
$("#mbody").css({"background-image":"url(‘"+url+"‘)"});
}完整代码：
<!doctype html>
<html charset="en">
<head>
<meta charset="utf-8"/>
<title>你好!音乐</title>
<style type="text/css">
body{
white-space:normal;
word-break:break-all;
overflow:hidden;/** 这几句是对所有的子框都做了处理 **/
text-align:center;
}
#music{
margin:0 auto;
margin-top:80px;
width:800px;
height:550px;
background-color:#9998;
box-shadow: 10px 10px 20px 10px rgba(0,250,154,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5)
}
#mleft{
width:200px;
height:500px;
float:left;
background-color:rgb(0,191,255);
}
#mright{
width:600px;
height:500px;
float:left;
background-color:rgb(0,250,154);
}
#mright .mhead{
width:600px;
height:50px;
background-color:rgb(0,250,154);
}
#mright #mbody{
width:600px;
height:450px;
opacity:1;
background-image:url("./jkq.bmp");
background-repeat:no-repeat;
background-size:100% 100%;
}
.footer{
width:800px;
height:50px;
float:right;
background-color:rgb(255,255,0);
}
#adv{
width:100%;
height:50px;
background-color:rgb(255,165,0);
position:fixed;
top:0px;
right:0px;
box-shadow: 10px 10px 30px rgb(0,0,0);
}
</style>
</head>
<body>
<div id="music">
<!-- 左侧 -->
<div id="mleft">
</div>
<!-- 右侧 -->
<div id="mright">
<!-- mhead -->
<div class="mhead">
</div>
<!-- mbody -->
<iframe name="mbody" class="mbody" id="mbody" src="https://www.baidu.com" frameborder="0">
</iframe>
</div>
<!-- footer -->
<div class="footer">
</div>
</div>
<!-- Advertisement广告 -->
<div id="adv">
<a href="https://www.qq.com" target="mbody"> 腾讯网</a>
<button id="reduction">还原</button><button id="fullscreen">最大化</button><input type="file" id="file_road" placeholder="请选择"/>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
//查看jquery版本，以及是否加载成功，在浏览器调试，控制台输入$.fn.jquery
//width:600px;
//height:450px;
//opacity:1;
//background-color:rgb(0,250,154);
$(document).ready(function(){
$("#reduction").click(function(){
$(".mbody").css({"width":"600px","height":"450px","position":"static"});
//下面的fixed的样式也要变
$("#adv").css({"position":"fixed","width":"100%"});
});
$("#fullscreen").click(function(){
$(".mbody").css({"width":$(window).width()+"px","height":$(window).height()+"px","position":"fixed","top":"0px","left":"0px"});
//下面的fixed的样式也要变
$("#adv").css({"top":"0px","right":"0px","width":"200px","height":"50px","box-shadow":"10px 10px 5px 0.5 red"});
changBackground();
});
});
//修改背景图片的方法
function changBackground(){
/**
* 文件预览
*/
var fileObj = document.getElementById("file_road").files[0];
if (window.createObjcectURL != undefined) {
url = window.createOjcectURL(fileObj);
alert(url);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(fileObj);
alert(url);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(fileObj);
}
$("#mbody").css({"background-image":"url(‘"+url+"‘)"});
}
</script>