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
Post a Comment