點擊圖片選擇

替換圖像我已經設置了一個帶有基本標題的小模板。我正在嘗試製作類似於拖放網站的東西，但在這種情況下，佈局將相同，只是內容發生更改。點擊圖片選擇

正如我說的，我已經創建了一個頭元素，並賦予它一個背景圖像

header { 
    width: 100%; 
    height: 200px; 
    background: url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_2.jpg) center center no-repeat; 
    background-size: cover; 
}

爲了讓形象改變一下，我可以做這樣的事情

$(function() { 
    $('#header').click(function() { 
    $(this).css('background', 'url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_1.jpg)'); 
    }); 
});

我已經設置了一個示例JSFiddle。雖然這與我想要做的相似，但我想讓用戶從他們的計算機中選擇圖像，而不是更改爲硬編碼圖像。所以有點像圖片上傳選擇選項，但在這種情況下，我沒有上傳任何東西。我的目標是完成一個保存按鈕，它將生成這些更新的HTML/CSS文件。

所以我想知道如何去允許用戶選擇他們想要替換默認的圖像？

謝謝

來源

2016-12-01 kate_hudson

什麼樣的「更新」是你的國王關於？您是否期望訪問您網站的每個人都能看到新圖片？如果是這樣，那麼如果不以這種或那種方式將圖像上傳到Web服務器，您認爲這會起作用嗎？ – CBroe

所以基本上是用戶選擇文件時的圖像預覽。像這樣的一個http://jsfiddle.net/danialfarid/maqbzv15/1118/？ – iamdevlinph

不期望爲訪問該網站的每個人提供更新，僅限網站上的人員。所以這將坐在舞臺服務器上。然後我訪問它，點擊圖片並將其改爲我自己的圖片。然後我將有一個保存按鈕，下載更新後的源代碼。下一位訪問者將看到原件。 –

你想做的事很棘手。這是一個可能的解決方案。

由於從this question報價，你都不可能有客戶端「上傳」在Javascript他們的操作鍵圖像：

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      document.getElementById('blah').src = e.target.result; 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

And the HTML: 

     <input type='file' id="imgInp" onchange="readURL(this);" /> 
     <img id="blah" src="#" alt="your image" />

然後可能使用base64編碼的圖像，並運行它變成你的背景鏈接參數：

background:url(data:base64;image/jpg,IMAGINE_BASE64_JIBBERISH_HERE)

我會假設，reader.result包含在開始data:base64;image/(type),的東西，但ÿ你必須自己試驗一下。

下面是一些閱讀材料：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
http://jsfiddle.net/0GiS0/Yvgc2/（在工作中的FileReader的例子，可能是有用的）
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

來源

2016-12-02 03:15:46 HelpingHand

點擊圖片選擇

回答

相關問題