Real-time upload of picture previews with JQUERY,HTML5

 html code  <div class  = "Form-group" > <label for  = "pic" class  = "Col-md-1 C Ontrol-label "> Small figure:</label> <div class  =" Col-md-4 "> &L T;input type= "file" class  = "Form-control" name= "pic"/> <div class  = "Progress" ><span class  = "Bgpro" > </span></div> class  = "Pic_show"/> </div> </div> 

CSS code . Progress {    width: 100%;    Height:10px;    Border#CCC;    margin:3px 0;}. Bgpro {    display:block;    Width: 1%;    Background:Green;    Height:10px;    Color:#FFF;}

JS Code<script type= "Text/javascript" >    $(' Input[name= ' pic "] '). On (' Change ',function() {        if(typeof this.files = = ' undefined ')){            return; }        varimg = this.files[0];//Get picture information        varType = Img.type;//get the type of picture and judge the use        varurl = Getobjecturl (this.files[0]);//get the picture local URL using a custom function        varFD =NewFormData ();//instantiate the form and submit the data for useFd.append (' img ', IMG);//Append the img in        if(URL) $ ('. Pic_show '). attr (' src ', url). Show ();//Show Pictures        if(Type.substr(0,5)! = ' image ') {//Invalid type filteringAlert (' Non-picture type, cannot be uploaded! ‘); return; }        //start Ajax request, background with TP$.Ajax ({type: ' Post ',URL: ' __url__/upload_img ',Data: FD,ProcessData:false,//Tell JQuery isn't to process the data, this is a must, otherwise it will be an errorContentType:false,//Tell JQuery don't to set ContentTypeDataType: ' Text ',XHR:function() {//This is the focus, get to the original XHR object, and then bind Upload.onprogress                varXHR = jquery.ajaxsettings.xhr (); XHR. upload.onprogress =function(EV) {//here, start calculating percentages .                    varParcent = 0; if(EV.lengthcomputable) {percent= * Ev.loaded/ev.Total ; Percent= parsefloat (percent). toFixed (2); $('. Bgpro '). CSS (' width ', percent + '% '). HTML (percent + '% '));                }                }; returnXHR; },        });    }); //Custom Get picture path function    functionGetobjecturl (file) {        varURL =NULL ; if(window.createobjecturl!=undefined) {//Basicurl = Window.createobjecturl (file) ; } Else if(Window. url!=undefined) {//Mozilla (Firefox)url = window. Url.createobjecturl (file) ; } Else if(window.webkiturl!=undefined) {//WebKit or Chromeurl = Window.webkitURL.createObjectURL (file) ; }        returnURL; }</script>

Can further beautify, for example, wearing the wrong, you can do an AJAX delete, re-transmission, compared to very easy

The data obtained:

Reference URL: http://blog.csdn.net/a519640026/article/details/18090695

Real-time upload of picture previews with JQUERY,HTML5