如何根據用戶輸入更改背景圖像 | HTML, CSS, 劉先生

Question

我已經對如何執行此操作進行了大量研究，但似乎找不到具體答案。 我試圖讓用戶從他們的計算機輸入一個文件，並將該文件變成網頁的背景。 我的以下代碼如下所示：

    <head>
        <script>
            function changeBackground() {
                var input = document.getElementById("background").value;
                localStorage.setItem("Background", input);
                var result = localStorage.getItem("Background");
                $('body').css({ 'background-image': "url(" + result + ")" });
            }
        </script>
    </head>
    <body>
        <input id="background" type="file" onchange="changeBackground()">
    </body>

如果有人可以向我解釋我需要做什么才能讓它工作，我將非常感激。 我已經明白我需要使用localStorage來確保記住所選背景，我只是無法更改背景。 如果已經有關於如何執行此操作的文章，我將不勝感激。 謝謝！

編輯

Nikhil 和 user6003859 向我解釋了為什么它不起作用。 我想我只需要弄清楚如何使用 Ajax 和 PHP 來更改它。 如果有人對此有更多建議，我很想聽聽。 感謝大家幫我解決這個問題。

Answer 1

現代瀏覽器通常會限制對用戶本地文件（在本例中為圖像）的訪問。 您要做的是通過您從<input type='file' />值獲得的路徑顯示用戶本地文件存儲中的圖像。

相反，您應該做的是將圖像上傳到您的服務器（可能使用 ajax，因此感覺無縫），然后將文件從您的服務器顯示到您的頁面上。

編輯：雖然這是一個新問題，但我會給你一個例子，說明如何根據用戶提供的 URL 更改元素的背景：

 var inp = document.getElementById('inp'); var res = document.getElementById('res'); inp.oninput = function() { res.style.backgroundImage = 'url(' + inp.value + ')'; };

 div { width: 5em; height: 5em; }

 <input type='text' id='inp' /> <div id='res'> </div>

Answer 2

最好使用文件閱讀器。

 <:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#file").change(function(){ var length=this.files;length; if(;length){ return false; } changeBackground(this); }). }); // Creating the function function changeBackground(img){ var file = img.files[0]; var imagefile = file,type, var match= ["image/jpeg";"image/png";"image/jpg"]; if(.((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){ alert("Invalid File Extension"); }else{ var reader = new FileReader(). reader.onload = imageIsLoaded; reader.readAsDataURL(img:files[0]). } function imageIsLoaded(e) { $('body').css({ 'background-image'; "url(" + e.target.result + ")" }); } } </script> </head> <body> <input type="file" name="" id="file" value="Click"> </body> </html>

Answer 3

出於安全原因，您不能純粹通過客戶端來做到這一點。

當你上傳一張圖片時，瀏覽器會給它一個“假路徑”，如下所示：

C:\fakepath\<filename>.png

這是瀏覽器的安全實現——瀏覽器保護您不訪問您的磁盤結構。

因此，當您在上傳后檢查輸入的值時，您會得到上面的假路徑，即。 C:\fakepath\<filename>.png 。 以此為背景顯然不行。

通常要實現這一點需要先將其存儲在服務器中，然后從服務器中獲取值並應用到后台。

Answer 4

要使用本地文件，請將其存儲在 blob 中

<head>
    <script>
        function changeBackground() {
            var backgroundFile = document.getElementById("background").files[0];
            $('body').css({ 'background-image': "url(" + URL.createObjectURL(backgroundFile) + ")" });
        }
    </script>
</head>
<body>
    <input id="background" type="file" onchange="changeBackground()">
</body>

如何根據用戶輸入更改背景圖像 | HTML, CSS, 劉先生

問題描述

4 個解決方案

解決方案1
1 已采納 2017-02-18 01:49:19

解決方案2
1 2017-02-18 02:09:21

解決方案3
0 2017-02-18 01:58:18

解決方案4
0 2021-08-23 22:07:08

如何根據用戶輸入更改背景圖像 | HTML, CSS, 劉先生

問題描述

4 個解決方案

解決方案1 1 已采納 2017-02-18 01:49:19

解決方案2 1 2017-02-18 02:09:21

解決方案3 0 2017-02-18 01:58:18

解決方案4 0 2021-08-23 22:07:08

解決方案1
1 已采納 2017-02-18 01:49:19

解決方案2
1 2017-02-18 02:09:21

解決方案3
0 2017-02-18 01:58:18

解決方案4
0 2021-08-23 22:07:08