Блог

Я загружаю файлы. Перед их загрузкой я показываю их изображение, используя приведенный ниже код. Это работает для файлов PDF и изображений (‘gif’, ‘png’, ‘jpg’, ‘jpeg’). Теперь я хочу включить документы MS Word (‘doc’, ‘docx’). Как мне отобразить изображение или я должен просто отобразить «вставленное» изображение (например, страницу с буквой «W» на ней)?

 var imageType = "";

$(document).on('change', '.photo-input', function(){
    //Check for a valid image extension
    var img1 = this.files[0].type;
    imageType = img1.substr(img1.indexOf("/")   1)
    alert("imageType: "   imageType);
    if (imageType === "doc" || imageType === "docx"){
        alert("Word");
        var mySubString = img1.substring(
            img1.lastIndexOf("image")   13
        );
        alert("mySubString: "   mySubString);
    }else{
        if(imageType === "pdf"){
            var mySubString = img1.substring(
                img1.lastIndexOf("image")   13
            );
            if($.inArray(mySubString, ['pdf']) == -1) {
                alert('Add invalid extension!');
                $('#image').attr('src', 'data:application/(pdf);base64');
            }else{
                //Check for a valid image size
                if (this.files[0].size < 10000000){
                    readURL(this, this.id);
                }else{
                    alert("This image is to large (must be < 1 MB).")
                    $('#image').attr('src', 'data:application/(pdf);base64');
                }
                var img1 = document.getElementById('image');
                img2 = (img1.getAttribute('src')).replace(/^data:application/(pdf);base64,/, "");
            }
        }else{
            var mySubString = img1.substring(
                img1.lastIndexOf("image")   6
            );
            if($.inArray(mySubString, ['gif','png','jpg','jpeg']) == -1) {
                alert('Add invalid extension!');
                $('#image').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==');
            }else{
                //Check for a valid image size
                if (this.files[0].size < 10000000){
                    readURL(this, this.id);
                }else{
                    alert("This image is to large (must be < 1 MB).")
                    $('#image').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==');
                }
                var img1 = document.getElementById('image');
                img2 = (img1.getAttribute('src')).replace(/^data:image/(png|jpg|jpeg|gif);base64,/, "");
            }
        }
    }

});


function readURL(input, id) {
    if (input.files amp;amp; input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            if(imageType === "pdf"){
                $("#imageDiv").html("");
                $("<embed width='191' height='207' id='imageManualAdd' src='' type='application/pdf' class='img-thumbnail'>").appendTo($("#imageDiv"));
            }else{
                $("#imageDiv").html("");
                $("<img id='image' src='' alt='Image' class='img-thumbnail'>").appendTo($("#imageDiv"));
            }

            $('#image').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
  

Кроме того, в рамках этого я готовлю изображение для загрузки в базу данных MySQL (я понимаю аргументы против этого) через ajax:

         if(imageType === "pdf"){
            img2 = (img1.getAttribute('src')).replace(/^data:application/(pdf);base64,/, "");
        }else{
            img2 = (img1.getAttribute('src')).replace(/^data:image/(png|jpg|jpeg|gif);base64,/, "");
        }
  

Где «img2» является частью данных, передаваемых в программу Java. Как мне нужно изменить это для документа MS Word, пожалуйста?

Я придумал это (обратите внимание, как я скрываю изображение MS Word и отображаю изображение по умолчанию):

 var imageType = "";
var thisFile = "";

$(document).on('change', '.photo-input', function(){
    //Check for a valid image extension
    var filePath = $('#photo').val();
    var extension = filePath.substr( (filePath.lastIndexOf('.')  1) );
    var fileName = filePath.split('\').pop();
    var fileName = fileName.substr(0, fileName.lastIndexOf('.')) || fileName;

    $("#resourceNameAdd").val(fileName);
    
    var img1 = this.files[0].type;
    imageType = img1.substr(img1.indexOf("/")   1)
    
    if (extension === "doc" || extension === "docx"){
        imageType = extension;
        if (this.files[0].size < 10000000){
            readURL(this, this.id);
        }else{
            alert("This image is to large (must be < 1 MB).")
            $('#image').attr('src', 'data:application/(pdf);base64');
        }
    }else{
        if(imageType === "pdf"){
            var mySubString = img1.substring(
                img1.lastIndexOf("image")   13
            );
            if($.inArray(mySubString, ['pdf']) == -1) {
                alert('Add invalid extension!');
                $('#image').attr('src', 'data:application/(pdf);base64');
            }else{
                //Check for a valid image size
                if (this.files[0].size < 10000000){
                    readURL(this, this.id);
                }else{
                    alert("This image is to large (must be < 1 MB).")
                    $('#image').attr('src', 'data:application/(pdf);base64');
                }
            }
        }else{
            var mySubString = img1.substring(
                img1.lastIndexOf("image")   6
            );
            if($.inArray(mySubString, ['gif','png','jpg','jpeg']) == -1) {
                alert('Add invalid extension!');
                $('#image').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==');
            }else{
                //Check for a valid image size
                if (this.files[0].size < 10000000){
                    readURL(this, this.id);
                }else{
                    alert("This image is to large (must be < 1 MB).")
                    $('#image').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==');
                }
            }
        }
    }

function readURL(input, id) {
    if (input.files amp;amp; input.files[0]) {
        
        var reader = new FileReader();
        reader.onload = function (e) {
            if(imageType === "doc" || imageType === "docx"){
                $("#imageDiv").html("");
                $("<img id='image' src='' alt='Image' class='img-thumbnail' style='display:none'>").appendTo($("#imageDiv"));
                $("<img id='image2' src='images/msWord.png'' alt='Image' class='img-thumbnail'>").appendTo($("#imageDiv"));
            }else{
                if(imageType === "pdf"){
                    $("#imageDiv").html("");
                    $("<embed width='191' height='207' id='image' src='' type='application/pdf' class='img-thumbnail'>").appendTo($("#imageDiv"));
                }else{
                    $("#imageDiv").html("");
                    $("<img id='image' src='' alt='Image' class='img-thumbnail'>").appendTo($("#imageDiv"));
                }
            }

            $('#image').attr('src', e.target.result);
        }
        // readAsArrayBuffer, readAsBinaryString, readAsDataURL or readAsText is available.
        reader.readAsDataURL(input.files[0]);
    }
}