File Upload through Jquery

File Upload through Jquery

by Anand Jee

HTML

<form id="form1" runat="server">

        <div id="blah" style="height:200px;width:200px;border:2px solid #ddd;margin:0px auto;">
            <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" id="p" style="width:100%;height:100%;background-size:100% 100%;"/>
             <label class="myFile">
  <img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
  <input type="file"  id="imgInp"/>
</label>
        </div>
    </form>

CSS

.myFile {
  margin: -60px auto 0 auto;
  background: green;
  width: 50px;
  display: none;cursor:pointer;
}
#blah:hover >.myFile{display:block;}
.myFile input[type="file"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  font-size: 100px;
  filter: alpha(opacity=0);
  cursor: pointer;
}

JavaScript

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#p').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#imgInp").change(function(){
        readURL(this);
    });