La brukeren endre bakgrunnsbildet på websiden for sin egen del

Kobraz · 24. september 2015

Hei.

Jeg prøver å lage en nettside hvor brukeren kan endre bakgrunnsbilde etter eget ønske, men kun for sin egen del.

Jeg googlet og fant denne siden: http://stackoverflow.com/questions/14678207/how-can-i-let-users-customize-background-images og prøvde demoen som lå der - den fungerte perfekt.

Her er koden min:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
    $(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);
    }
</script>

</head>
<body>

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

</body>
</html>

Kobraz · 24. september 2015

Ser at koden i demoen er slik:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    
  </style>
  



<script type='text/javascript'>//<![CDATA[

    $(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);
    }
//]]> 

</script>

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

</html>

Jeg bruker også denne koden nå - har lastet ned css filene og javascript filen til pcn da. Linker direkte til javascript filen istedet for via nettsiden. Nå funker det...

NoTrace · 25. september 2015

Ok.

Var det noe du lurte på?

Kobraz · 6. november 2015

Ok.

Var det noe du lurte på?

Neida, ville bare dele det i tilfelle flere har bruk for det samme.

NoTrace · 6. november 2015

Haha, den er grei!

Er ikke så ofte folk lager tråder uten at de har noe de trenger hjelp til. :-)

Dan-Levi · 13. november 2015

Helt supert tenkt Kobraz! Fortsett sånn ☺

Kobraz · 13. november 2015

Må prøve å gi litt tilbake da

Logg inn

La brukeren endre bakgrunnsbildet på websiden for sin egen del

Anbefalte innlegg

Kobraz

Videoannonse

Kobraz

NoTrace

Kobraz

NoTrace

Dan-Levi

Kobraz

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer