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

CodeTextPro.com Provides - Web design, Technology gyan, Digital marketing, Online earnings, Seo, Adsense, Technology news, Motivation and inspiration, Latest Technology Affairs, Gadgets, Blogging

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