Gå til innhold

La brukeren endre bakgrunnsbildet på websiden for sin egen del

Kobraz

Av Kobraz
i Programmering og webutvikling

Anbefalte innlegg

Kobraz

Kobraz

Skrevet
Skrevet

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>
  • Liker 1
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Kobraz

Kobraz

Skrevet
  • Forfatter
Skrevet

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...

  • Liker 1
Lenke til kommentar
  • 1 måned senere...

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...