GoalModelEditor/FrontEnd/public/js/projectEdit/image.js
/**
 * read image from local and show on the page
 */
read image from local and show on the page
read image from local and show on the page
function readImage() {
    if (window.File && window.FileList && window.FileReader) {
        let files = event.target.files; 
        let output = $(".preview-images-zone");
        let formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            if (!file.type.match("image")) continue;
            formData.append("image", file);
            let picReader = new FileReader();
            picReader.addEventListener("load", function(event) {
                let picFile = event.target;
                let html =
                    '<div class="preview-image preview-show-' +
                    numOfImages +
                    '">' +
                    '<div class="image-cancel" data-no="' +
                    numOfImages +
                    '">x</div>' +
                    '<div class="image-zone"><img id="pro-img-' +
                    numOfImages +
                    '" src="' +
                    picFile.result +
                    '"></div>' +
                    "</div>";
                output.append(html);
                numOfImages = numOfImages + 1;
            });
            picReader.readAsDataURL(file);
        }
        uploadPictures(formData);
        $("#pro-image").val("");
    } else {
        $("#warning-alert").html(
            "Browser supporting issue, please try another browser."
        );
        $("#warning-alert")
            .slideDown()
            .delay(3000)
            .slideUp();
    }
}
function readImage ( ) { if ( window . File && window . FileList && window . FileReader ) { let files = event . target . files ; let output = $ ( ".preview-images-zone" ) ; let formData = new FormData ( ) ; for ( let i = 0 ; i < files . length ; i ++ ) { let file = files [ i ] ; if ( ! file . type . match ( "image" ) ) continue ; formData . append ( "image" , file ) ; let picReader = new FileReader ( ) ; picReader . addEventListener ( "load" , function ( event ) { let picFile = event . target ; let html = '<div class="preview-image preview-show-' + numOfImages + '">' + '<div class="image-cancel" data-no="' + numOfImages + '">x</div>' + '<div class="image-zone"><img id="pro-img-' + numOfImages + '" src="' + picFile . result + '"></div>' + "</div>" ; output . append ( html ) ; numOfImages = numOfImages + 1 ; } ) ; picReader . readAsDataURL ( file ) ; } uploadPictures ( formData ) ; $ ( "#pro-image" ) . val ( "" ) ; } else { $ ( "#warning-alert" ) . html ( "Browser supporting issue, please try another browser." ) ; $ ( "#warning-alert" ) . slideDown ( ) . delay ( 3000 ) . slideUp ( ) ; } }
read image from local and show on the page
read image from local and show on the page
//FileList object // check file type // add file to formData // generate the picture html // '<div class="tools-edit-image"><a href="javascript:void(0)" data-no="' + num + '" class="btn btn-light btn-edit-image">edit</a></div>' +