How to upload image in html form | CodeTextPro - CodeTextPro | Free Web Tutorial

Codetextpro Provides free Web tutorial, HTML, CSS, C, C++, Java, JavaScript, PHP, MySql, Python, Program, Programming Notes, Programming Questions and more.

Programming

Friday, January 11, 2019

How to upload image in html form | CodeTextPro

In this program, you will learn how to upload an image in your HTML form and you can see the image that you upload.





UploadImage.html


<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
function imageIsLoaded(e) {
<input type="reset" value="Cancel">

<head>
<title>upload</title>
</head>
<body bgcolor="yellow">
<center><h1>Submit Your Query</h1>
<form>
Name:<input type="text" name="usrname">
<br>
<br>
<textarea rows="4" cols="50">
Enter text here...</textarea><br><br>
<input type='file' />
<img id="myImg" src="#" alt="
Your Image" width="200" height="150" />



    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

    $('#myImg').attr('src', e.target.result);
};
</script>
<br>
<br>
<input type="submit" value="Submit">

</form>
</table>
</body>
</center>
</html>

No comments:

Post a Comment