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+"')"});
}

View Code

完整代码：

 <!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>

View Code

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

猜你喜欢