Results 1 to 6 of 6

Thread: html: background from local filesystem

  1. #1
    Join Date
    Dec 2004
    Beans
    60

    html: background from local filesystem

    hi everyone.

    the question:

    how can i make (with html and js) a way that lets the user select an image from his local filesystem and set it as background... all this without going through the web server?

    (i want to know if there's a way to do it or i'm forced to make a server side)

    more context:
    i'm new in this about web programming and i'm trying to make a simple application to do this thing:

    - the user selects a picture from his local FS
    - the picture is loaded en the page and de user selects some points
    - the page makes some math calculations and presents the results
    - all this in one html+js web page, without server side (i think it doesn't justify uploading the image to a server just to be served back again).

    thanks for any help.
    excuse my english.

  2. #2
    Join Date
    Sep 2007
    Location
    Christchurch, New Zealand
    Beans
    1,328
    Distro
    Ubuntu

    Re: html: background from local filesystem

    The recommended way to set background images is in CSS, but you can do it straight in the html and you can get Javascript to write that html as it loads using documemt.write()

    I won't attempt the Javascript coding, but here is some html to display a local file as background image to get you started:

    Code:
    <html><head>
    	<title>background image test</title>
    </head><body background="file:///usr/share/backgrounds/Daisy.jpg">
    </body></html>

  3. #3
    Join Date
    Dec 2004
    Beans
    60

    Re: html: background from local filesystem

    Quote Originally Posted by worksofcraft View Post
    The recommended way to set background images is in CSS, but you can do it straight in the html and you can get Javascript to write that html as it loads using documemt.write()

    I won't attempt the Javascript coding, but here is some html to display a local file as background image to get you started:

    Code:
    <html><head>
    	<title>background image test</title>
    </head><body background="file:///usr/share/backgrounds/Daisy.jpg">
    </body></html>
    i'm setting the background with an initial image; also i put a form in the page with an input (type="file") to let the user select an image, but i don't know how to capture the selected file path... and some people suggested that security concerns make it impossible to capture and read that path...

  4. #4
    Join Date
    Sep 2007
    Location
    Christchurch, New Zealand
    Beans
    1,328
    Distro
    Ubuntu

    Re: html: background from local filesystem

    Quote Originally Posted by angustia View Post
    i'm setting the background with an initial image; also i put a form in the page with an input (type="file") to let the user select an image, but i don't know how to capture the selected file path... and some people suggested that security concerns make it impossible to capture and read that path...
    You can select files from your local system. e.g. try "Manage Attachments" on these Ubuntu forums. Right click the page and try "view source" to see how they did it... admittedly it all looks rather ghastly and unintelligible to me (like most things Javascript), but I heard some people can actually understand it

  5. #5
    Join Date
    Nov 2008
    Location
    Here, There, Everywhere
    Beans
    1,168
    Distro
    Xubuntu

    Re: html: background from local filesystem

    here's an example. it only works on firefox, not chrome.
    Code:
    <html>
    <head>
    <title>title</title>
    <script type="text/javascript" language="javascript" charset="utf-8">
    // <![CDATA[
    function file_change()
    {
      var filename = document.getElementById('filename');
      var preview =  document.getElementById('preview');
      if (filename.files)
      {
        preview.src = filename.files.item(0).getAsDataURL();
      }
      else
      {
        preview.src = filename.value;
      }
    }
    // ]]>
    </script>
    </head>
    <body>
      <form action="get" method="#">
        <input type="file" id="filename" onchange="file_change();" />
      </form>
      <img id="preview" src="#" alt="preview" />
        
     </body>
    </html>

  6. #6
    Join Date
    Dec 2004
    Beans
    60

    Re: html: background from local filesystem

    Quote Originally Posted by worksofcraft View Post
    You can select files from your local system. e.g. try "Manage Attachments" on these Ubuntu forums. Right click the page and try "view source" to see how they did it... admittedly it all looks rather ghastly and unintelligible to me (like most things Javascript), but I heard some people can actually understand it
    i was looking in that code, and i could get the name of the filename but not the complete path... and it seems that it's that way by security design.

    now, i found this hack that uses drag an drop to load a local image, works in chrome too and happens to work offline too...

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •