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>
