HTML Help
HTML Help Central . com

» Online Users: 79

0 members and 79 guests
No Members online
Most users ever online was 695, 02-16-2011 at 07:01 AM.

» Site Navigation

 > FAQ

» Domains For Sale

Results 1 to 8 of 8
  1. #1
    Join Date
    Dec 2013
    Posts
    5

    Just need a little help :)

    Hello there, my name is Vinny, and I'm not exactly new to Web Developement, well, technically I am but; I'm having a little trouble with something, it's a bit new to me as I've never done it before.
    So please bear with me.
    I'm currently working on a website, and I'm trying to add an image upload functionality.
    I've got the frame done, I'm just struggling on modifying a tutorial I'm following.

    What I've got is:
    Code:
    <div class="foto_wrapper">
                  <a href="#">
                    <img src="images/upload.png" alt="" class="upload" />
                    upload photo
                  </a>
                </div>
    Which gives me:



    Now, I'm following this tutorial: http://www.tizag.com/phpT/fileupload.php


    But what I want to do is take, from the tutorial:
    Code:
    <form enctype="multipart/form-data" action="uploader.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
    Choose a file to upload: <input name="uploadedfile" type="file" /><br />
    <input type="submit" value="Upload File" />
    </form>
    And attach it to:
    Code:
    <div class="foto_wrapper">
                  <a href="#">
                    <img src="images/upload.png" alt="" class="upload" />
                    upload photo
                  </a>
                </div>
    So that if I click on:

    It'll open the image upload window.


    I was suggested to try:
    Code:
    <form enctype="multipart/form-data" action="test.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
    Choose a file to upload: <input name="uploadedfile" type="file" /><br />
    <button id="bar" type="submit" style="border: none;"><img src="images/upload.png" alt="" class="upload" /><br />UPLOAD PHOTO</button>
    </form>
    But that gives me:



    I've been fiddling around with the code but can't seem to get it right.
    Any suggestions or advice will be greatly appreciated.
    Thank you for taking the time to read this.
    Last edited by JF_Vinny; 12-15-2013 at 07:57 PM.

  2. #2
    Join Date
    Sep 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    369
    Hi there JF_Vinny,

    and a warm welcome to these forums.

    Does this help a little...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    #upload-image {
        cursor:pointer;
     }
    input[type=submit] {
        display:block;
     }
    .hide {
        display:none;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
    
    function init(){ 
       document.getElementById('upload-image').className='';
       document.getElementById('upload-form').className='hide';
       document.getElementById('upload-image').onclick=function() {
       document.getElementById('upload-form').className='';
       this.className='hide';
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    })();
    
    </script>
    
    </head>
    <body>
    
    <img id="upload-image" class="hide" src="http://i.imgur.com/4cLjlr0.png" alt="upload">
    
    <form id="upload-form" action="uploader.php"  enctype="multipart/form-data" method="post">
     <input type="hidden" name="max_file_size" value="100000">
     <label>Choose a file to upload:<input name="uploadedfile" type="file"></label>
     <input type="submit" value="Upload File" >
    </form>
    
    </body>
    </html>
    Last edited by coothead; 12-17-2013 at 08:10 AM. Reason: added the image link to the code
    http://www.htmlhelpcentral.com/messageboard/image.php?type=sigpic&userid=8698&dateline=1189772  724

  3. #3
    Join Date
    Dec 2013
    Posts
    5
    Thank you for replying, I'm just now trying the code as I've been sick and haven't checked if anyone replied.
    I'll update my post in a few moments to say if it worked or not .

    When I click on



    It just replaces it with



    Is it possible to make it so if I click on my image, it's as if I'm clicking on "Choose File"?
    Last edited by JF_Vinny; 12-18-2013 at 03:09 PM.

  4. #4
    Join Date
    Sep 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    369
    Hi there JF_Vinny,

    Is it possible to make it so if I click on my image, it's as if I'm clicking on "Choose File"?
    I did not realize, from your original post, that was what you required.

    I will do some tests to see if that is at all possible.

    But don't hold your breath on this one.
    Last edited by coothead; 12-18-2013 at 03:34 PM.
    http://www.htmlhelpcentral.com/messageboard/image.php?type=sigpic&userid=8698&dateline=1189772  724

  5. #5
    Join Date
    Dec 2013
    Posts
    5
    Quote Originally Posted by coothead View Post
    Hi there JF_Vinny,



    I did not realize, from your original post, that was what you required.

    I will do some tests to see if that is at all possible.

    But don't hold your breath on this one.

    Thank you for your speedy reply sir.
    I hope you are able to figure something out.

  6. #6
    Join Date
    Sep 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    369
    Hi there JF_Vinny,

    have a look at this example...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    #upload-form {
        position:relative;
        width:141px;
        padding:20px;
        border:1px solid #999;
        margin:auto;
        background-color:#fff;
        box-shadow:5px 5px 5px #999;
     }
    #upload-form input[type=file] {
        visibility:hidden;
        height:107px;
        margin-bottom:20px;
     }
    input[type=submit]{
        display:block;
        margin:auto;
     }
    #upload-image {
        position:absolute;
        top:20px;
        left:20px;
        width:141px;
        height:107px;
        cursor:pointer;
        box-shadow:5px 5px 5px #999;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
    
    function init(){ 
      document.getElementById('upload-image').addEventListener('click',function(e) {
      document.getElementById('upload-file').click();
      }, false);
     }
       window.addEventListener('load',init,false);
    })();
    </script>
    
    </head>
    <body>
    
    <form id="upload-form" action="uploader.php"  enctype="multipart/form-data" method="post">
     <img id="upload-image" src="http://i.imgur.com/4cLjlr0.png" alt="upload">
     <input type="hidden" name="max_file_size" value="100000">
     <input id="upload-file" name="uploadedfile" type="file">
     <input type="submit" value="Upload File" >
    </form>
    
    </body>
    </html>
    The code has been tested in IE11, Firefox 26.0, Chrome 31.0, Safari 5.1.7, Opera 12.6 and 18.0.
    http://www.htmlhelpcentral.com/messageboard/image.php?type=sigpic&userid=8698&dateline=1189772  724

  7. #7
    Join Date
    Dec 2013
    Posts
    5
    Thank you sir, I will try the example you've provided me and see how it works out.

    Everything is working fine, except for one thing.



    Far Left: Your Code
    Other Two: My code - unchanged yet

    Is it possible to remove that border around the buttons? And then move the "Upload File" button up higher?


    I'm really sorry to put you through so much trouble, I've only minimal knowledge on this area of HTML.
    Thank you very much for your help so far sir.
    Last edited by JF_Vinny; 12-19-2013 at 04:26 PM.

  8. #8
    Join Date
    Sep 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    369
    Hi there JF_Vinny,

    where exactly, do you want the "Upload File" to be positioned?

    Here is an example, with borders removed...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    #upload-form {
        position:relative;
        width:141px;
        padding:20px;
        margin:auto;
        background-color:#fff;
     }
    #upload-form input[type=file] {
        visibility:hidden;
        height:107px;
        margin-bottom:5px;
     }
    input[type=submit]{
        display:block;
        margin:auto;
     }
    #upload-image {
        position:absolute;
        top:20px;
        left:20px;
        width:141px;
        height:107px;
        cursor:pointer;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
    
    function init(){ 
      document.getElementById('upload-image').addEventListener('click',function(e) {
      document.getElementById('upload-file').click();
      }, false);
     }
       window.addEventListener('load',init,false);
    })();
    </script>
    
    </head>
    <body>
    
    <form id="upload-form" action="uploader.php"  enctype="multipart/form-data" method="post">
     <img id="upload-image" src="http://i.imgur.com/4cLjlr0.png" alt="upload">
     <input type="hidden" name="max_file_size" value="100000">
     <input id="upload-file" name="uploadedfile" type="file">
     <input type="submit" value="Upload File" >
    </form>
    
    </body>
    </html>
    Last edited by coothead; 12-19-2013 at 04:41 PM.
    http://www.htmlhelpcentral.com/messageboard/image.php?type=sigpic&userid=8698&dateline=1189772  724

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Powered by vBadvanced CMPS v4.1.1