How we can upload an image in html

Question

I am new in designing, i want to upload image in html page . I am using this code.

<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" name="uploadField" />
</form>

my Question is:how we can upload an image in html OR browse an image?

you cant upload just using html. you need to process the uploaded file in the server too. — roullie, Dec 13 '13 at 12:07
'action' is used to guide what page you want to send the data to be processed. — C. S., Dec 13 '13 at 12:09
@C.S. be a better teacher: "Add the `action` attribute to the `form` element, like `action="process.php"` to target the desired .php file where you have the code that will process the received data from the POST method. ;) — Roko C. Buljan, Dec 13 '13 at 12:17
http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery?rq=1 — l2aelba, Dec 13 '13 at 12:26

score 0 · Answer 1 · answered Dec 13 '13 at 12:44

More or less this is how you do it in Javascript:

   var filesList = document.getElementById("uploadField");
    fileList.onchange = function(e){
        var file = e.target.files; // The file object may contain multiple files
        data = new FormData();
        data.append("nameOfFile",file[0]); // Here i send the 1st file
        xhr = new XMLHttpRequest();
        xhr.open("post", "UploadFile.php", true);
        xhr.send(data);
    }

Here is a link with a nice example of how to use HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Bas van Dijk · Answer 2 · 2013-12-13T12:50:19.220

In your example you are posting to a mailto link. Formdata needs to be posted to the server which process your request. This could be any kind of programming language e.g. php, python, perl, .net etc.

When your server page receives the post request it can process the "post data". Here you program what the server should do with the data you have send. This could be for example storing in a database, store on harddisk or send an email with the image attached etc.

Here is a simple example:

HTML e.g. index.html

action="action.php" refers to the file on the server which handles your post

<form action="action.php" method="post" enctype="multipart/form-data">
 <input name="uploadedfile" type="file" />
 <input type="submit" />
</form>

PHP e.g. action.php

The $_FILES array is where PHP stores all the information about the files of your form.

move_uploaded_file($_FILES['uploadedfile']['tmp_name'], '/upload_files/myimage.jpg');

This moves the posted file to /upload_files/myimage.jpg on the server harddsik

see http://php.net/manual/en/function.move-uploaded-file.php

may be more helpful to give an example of how to handle uploading an image (i.e. something that relates to the question). — dav1dsm1th, Dec 13 '13 at 12:23

score -1 · Answer 3 · answered Dec 13 '13 at 12:56

I got my Ans :

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

var thumbWidth = 400, thumbHeight =455 ;

    function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(thumbWidth)
                        .height(thumbHeight);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
</script>

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>
</html>

refer : http://jsbin.com/uboqu3/1/edit – sonalgoyal Dec 13 '13 at 13:03 — sonalgoyal, Dec 13 '13 at 13:03

How we can upload an image in html

3 Answers3