jquery HTML5 file upload picture display picture

A small example of how to display a picture when uploading a user image is recently done. On the internet to find a lot of information also failed to achieve, if, with jquery, HTML5, realized, because the development is in the Linux so failed to test under IE, under Forefox,chrom is possible.

One, the code under the HTML is:

     <div  class= ' Input_box '  >        <span class= ' Spac ' > Head </span> phase: <input class= "Input_style "  id=" ' Head_image ' "   name= ' headimage '   type= ' file ' ><label id= ' prompt_image ' >*</label>      </div>       <div   style= "height:60px; display:none;margin-bottom:10px;padding-left:50px; id=" Show_box ">               </div>

Second, jquery JS code: Different browsers under the path

    function Getobjecturl (file) {    var url = null;     if (window.createobjecturl!=undefined) {//basic    URL = window.createobjecturl (file);    } else if (window. url!=undefined) {//Mozilla (firefox)    url = window. Url.createobjecturl (file);    } else if (window.webkiturl!=undefined) {//WebKit or chrome    URL = window.webkitURL.createObjectURL (file);    }    return URL;    }

Three, display Image:

var strsrc=getobjecturl (This.files[0]); $ ("#show_img"). attr ("src", strsrc);

jquery HTML5 file upload picture display picture