사용자가 컴퓨터에서 HTML로 배경 이미지를 선택할 수 있도록 허용 JAVASCRIPT

Question

사용자가 문서를 탐색하고 배경 이미지로 설정할 그림을 선택하도록 허용하려고합니다. 나는 이미 사용자가 URL을 사용하여 배경 이미지를 어떻게 바꿀 수 있는지 알아 냈습니다. 찾아주세요 아래 데모 :

DEMO : http://goo.gl/253IN

아이디 : 데모

비밀번호 : 데모 1 나는 그것이

와 함께 작동하도록하는 방법을 잘 모릅니다

파일 필드

나는 아래에서 Example을 찾고 싶습니다. 찾을 질문 here

자바 스크립트 :

$(switchBackground); 
var oFReader = new FileReader(), 
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

oFReader.onload = function(oFREvent) { 
    localStorage.setItem('b', oFREvent.target.result); 
    switchBackground(); 
}; 

function switchBackground() { 
    $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');  
} 

function loadImageFile(testEl) { 
    if (! testEl.files.length) { return; } 
    var oFile = testEl.files[0]; 
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } 
    oFReader.readAsDataURL(oFile); 
} 

HTML :

<input id="test" type="file" onchange="loadImageFile(this)" /> 

나는 미리

에 (데모를 참조하시기 바랍니다) 내 현재 코드

감사를 작동시킬 수 어차피 그러나

PS 나는 HTML과 Javascrpit에 대한 전문가는 아니지만 (아직 : D) 그래서 나는 정말로 복잡한 코드를 이해할 수 없을 것입니다.

Answer 1

요컨대, 이런 식으로 file 입력을 사용할 수 없습니다. 자바 스크립트는 보안상의 이유로 사용자 직접 기계에 액세스 할 수 없습니다. 이 입력은 파일이 HTTP POST 요청의 본문에있는 웹 스트림을 통해 전달되도록 허용합니다.

원하는 것을 얻으려면 서버 쪽 파일을 PHP 또는 ASP.NET과 같은 서버 측 언어를 사용하여 업로드해야합니다. 그런 다음 저장하고 저장할 수 있으므로 방문 할 때마다 사용자 배경으로 표시 할 수 있습니다.

Answer 2

전혀 불가능하지 않습니다!

당신은 실제로

https://github.com/CybrSys/custom-background.js