Load image selected by the user on webpage

Question

I have a form. To make it a simple, the only element in the form is a file upload:

<form name="MyForm" action="upload_file.php" enctype="multipart/form-data" method="post">
    <input type="file" name="file" id="file" size="40"> 
    <button type="button" onclick="draw()">Refresh</button>
    <input type="submit" name="upload" value="Upload"> 
</form>

And in upload_file.php I retrieve the parameters the usual way.

On my webpage there is a default image

<img src="Images/default_icon.png" width="70px" height="70px"/>

I want to replace this image with the one the user selects from the Choose File dialog and (I guess it's necessary) presses the Refresh button. The user can upload as many files as he wants, and when he is finally satisfied with the image (only the last uploaded can be seen of course) he presses the upload button which takes him to the next webpage and uploads the image to the server.

I don't have much knowledge in web programming, but I think I know that I have to upload the images to a dedicated folder, because I cannot retrieve and use the path of the image on the client's machine. Then I can download the image from the server and load it something like this:

$url = '/upload/'.$_FILES["file"]["name"]; ///upload/icon.jpg

and

<img src="<?php echo $url; ?>" width="70px" height="70px"/>

Please help me with this or redirect me to a decent tutorial. An explanation on how this works in practice is also appreciated.

Thanks

Answer 1

I guess you need something like this:

http://blueimp.github.com/jQuery-File-Upload/

Answer 2

I have done this file uploading using iframe and form.
1>You need to have a form which includes input type as file and set the method as post of the form and set the target of the form to the iframe.
2> Set the src of iframe to the server side page where you need to upload the image.

Below is the html :-

<form id="fm1" method="post" enctype="multipart/form-data" target="ifrm">
<input type='file' id='file' name='image'/>
</form>

<iframe name='ifrm' style='display:none;' id='ifrm1' src='./CreateEvents.aspx'></iframe>


Once you sumbit the form to this iframe it automatically get posted to your server side page from where you can get the image convert it into bytes and upload to server or do any thing else.

Answer 3

I hate to answer my question but I managed to do it without actually uploading the image to the server. I didn't know that was possible, that's why I wrote The user can upload as many files as he wants, and when he is finally satisfied with the image (only the last uploaded can be seen of course) he presses the upload button which takes him to the next webpage and uploads the image to the server. . Why would the user upload more files until he founds the most appealing one when it's enough to select them from the computer one by one and upload the one he finds the most appropriate :)

HTML:

<input type="file" id="file" />
<input type="text" id="img_size" />
<img src="" id="fake_img" />

Javascript:

// Handle file while select a new file
$('#file').change(function () {
    $('#img_size').val((this.files[0].size) / 1000000);
    handleFiles(this.files);
});


// handle files
function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
            continue;
        }
        var img = document.getElementById('fake_img');
       /* img.src = file;
        img.onload = function () {
        }; */
        var reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }

}​