javascript - Prevent image file from loading to canvas after file size warning -


i trying prevent image file selected loading canvas if larger maximum allowed have set. logic checks image , throws warning, still loads image being checked. how can prevent occurring? also, need able clear image loaded, if new 1 loaded , checked. newly loaded image large, not checked validity or have warning thrown if big.

var fileinput = document.getelementbyid("file"),     renderbutton = $("#renderbutton"),     submit = $(".submit"),     imgly = new imglykit({         container: "#container",         ratio: 1 / 1     });  // user selects file... fileinput.addeventlistener("change", function (event) {    //check file size of input   if (window.file && window.filereader && window.filelist && window.blob)   {       //get file size , file type file input field       var fsize = $('#file')[0].files[0].size;       var ftype = $('#file')[0].files[0].type;       var fname = $('#file')[0].files[0].name;        if(fsize>54000) //do if file size more 1 mb (1048576)       {           $(".file-warning").html("<div class='alert alert-danger'><p>the image: <b>" + fname +"</b> <b>" + fsize/1000 + "kb</b> , big!</p></div>");           //alert("type :"+ ftype +" | "+ fsize +" bites\n(file: "+fname+") big!");       }   }else{       alert("please upgrade browser, because current browser lacks new features need!");   }   //end file size check      var file;      var filetoblob = event.target.files[0];     var blob = new blob([filetoblob], {         "type": filetoblob.type     });     // stuff blob     console.log(blob);     // find selected file     if (event.target.files) {         file = event.target.files[0];     } else {         file = event.target.value;     }      // use filereader turn selected     // file data url. imglykit needs     // data url or image     var reader = new filereader();     reader.onload = (function (file) {         return function (e) {             data = e.target.result;              // run imglykit selected file             try {                 imgly.run(data);             } catch (e) {                 if (e.name == "nosupporterror") {                     alert("your browser not support canvas.");                 } else if (e.name == "invaliderror") {                     alert("the given file not image");                 }             }         };     })(file);     reader.readasdataurl(file); }); 

when file size check failed - should save wrong state (by changing boolean variable) or break execution of function:

      if(fsize>54000) //do if file size more 1 mb (1048576)       {           $(".file-warning").html("<div class='alert alert-danger'><p>the image: <b>" + fname +"</b> <b>" + fsize/1000 + "kb</b> , big!</p></div>");           //alert("type :"+ ftype +" | "+ fsize +" bites\n(file: "+fname+") big!");           isvalidsize=false; // variable should created somewhere @ top. keep state of file-picker.           return; //this stop further actions;       } 

Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -