有没有办法让blob（createObjectURL）显示的图像是GIF文件但扩展名为.jpeg？

Using blueimp, I'm making a file upload module and I will show an image thumbnail before people upload the image.

使用blueimp,我正在创建一个文件上传模块,我会在人们上传图像之前显示一个图像缩略图。

My code contains the following:

我的代码包含以下内容:

$('.fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
        maxNumberOfFiles: 1,
        maxFileSize: 3000000,//3MB
        loadImageMaxFileSize: 3000000,//3MB
}).on('fileuploadsubmit', function (e, data) {

}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('.files');
    $.each(data.files, function (index, file) {
        // ファイル情報を表示する
        var node = $('<p/>')
                        .append($('<span/>').text(file.name));
        // プレビューを表示する
        if (!index) {
            node.append('<br>');
            if((/\.(jpe?g|png)$/i).test(data.files[0].name))
            {
                node.append('<img class= "uploaded-image" src="'
                            + URL.createObjectURL(data.files[0]) + '"/><br>');
            }
                node.append(uploadButton.clone(true).data(data))
                    .append(cancelButton);
        }
        node.appendTo(data.context);
    });
}) // .on(... code following

It works well, but if people change a GIF file extension to ".jpeg" and upload it, the blob will also work well to show the GIF and, I think it's not safe. Is there a way not let blob to show the thumbnail In this case?

它运行良好,但如果人们将GIF文件扩展名更改为“.jpeg”并上传它,blob也可以很好地显示GIF,我认为这不安全。有没有办法让blob显示缩略图在这种情况下?

When submit the file, I'm checking the file in the server side if the file is really an image file (although it has a valid extension).

提交文件时,我正在检查服务器端的文件,如果该文件确实是一个图像文件(尽管它有一个有效的扩展名)。

1 个解决方案

#1

(this link helped me)

(这个链接对我有帮助)

The code below worked well:

以下代码效果很好:

        if (!index) {
            node.append('<br>');
            if((/\.(jpe?g|png)$/i).test(data.files[0].name))
            {
                if (window.FileReader && window.Blob)
                {
                    var blob = data.files[0]; // See step 1 above
                    var fileReader = new FileReader();
                    fileReader.onloadend = function(e) {
                        var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
                        var header = "";
                        for(var i = 0; i < arr.length; i++) {
                            header += arr[i].toString(16);
                        }
                        if((header == "89504e47") || (header.substr(0,6) == "ffd8ff"))
                        {
                            $("button.upload").before('<img class= "uploaded-image" src="' + URL.createObjectURL(data.files[0]) + '"/><br>');
                            $(".file_upload").attr("style", "height: 600px; overflow-y: auto");
                        }
                        else
                        {
                            $("button.upload").prop('disabled', true);
                            var error = $('<span class="text-danger"/>').text(msg[4]);
                            $('.files').append('<br>').append(error);
                        }
                    };
                    fileReader.readAsArrayBuffer(blob);
                }
            }
                node.append(uploadButton.clone(true).data(data))
                    .append(cancelButton);
        }

#1