JQuery实现选择桌面照片,替换为网页背景【以及解决上传文件路径问题】

//修改背景图片的方法
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">
 
        div class="mhead">
         
        div>
    
        iframe name="mbody" class="mbody" id="mbody" src="https://www.baidu.com" frameborder="0">
        iframe>
    div>

    div class="footer">
    
    div>
 div>
 
     
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>