如何在 jQuery 中显示 MS Word 文件的图像，然后使用 Ajax 上传？

Question

我正在上传文件。在上传它们之前，我使用下面的代码显示它们的图像。这适用于 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 && 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]);
    }
}

此外，作为其中的一部分，我准备通过 ajax 将图像上传到 MySQL 数据库（我理解反对这样做的论点）：

        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 文档修改这个？

Answer 1

我想出了这个（注意我如何隐藏 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 && 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]);
    }
}