"UTF-8"> <title>Title</title> <style>Div {position:relative; Overflow:hidden; Background: #EEE; Width: -%; height:667px; } #bg, #mask-BG {position:absolute; Width: -%; height:667px; Background-Size:cover; } #mask-bg{top:9px; Mask-Image:url (mask.png); -webkit-mask-Image:url (mask.png); } input {height:60px; Margin-top:20px; } </style>"BG"></p> <p id="MASK-BG"></p></div><input type="file"><script>varinput = Document.queryselector ('input'), BG= Document.queryselector ('#bg'), MASKBG= Document.queryselector ('#mask-BG'); Input.onchange=function () {varsrc = Getobjecturl ( This. files[0]); SETBG (SRC); }; function SETBG (src) {bg.style.backgroundImage='URL ('+ src +')'; MaskBg.style.backgroundImage='URL ('+ src +')'; } /** * get its picture path (BLOB) by selecting a file * @param file * @returns {*}*/function Getobjecturl (file) {varURL =NULL; Console.log (window.createobjecturl) console.log (window. URL)if(Window.createobjecturl! =undefined) {URL=window.createobjecturl (file)}Else if(Window. URL! =undefined) {URL=window. Url.createobjecturl (file)}Else if(Window.webkiturl! =undefined) {URL=Window.webkitURL.createObjectURL (file)}returnURL}</script></body>
Front-end analog picture upload---->> get its path <<------from a selected picture