检查 HTML5 拖放文件类型

Question

我想根据有效负载上包含的拖动是否包含支持的文件类型 (JPEG)，将拖放区背景颜色更改为绿色或红色。

• Gecko 和 Webkit 是否支持判断拖放文件的文件类型？

• 如何在这两种浏览器中提取文件类型？

我找到了 event.dataTransfer.types API，但对于 Firefox，它似乎填充了 application/x-moz-file 因此我认为我做错了什么。

原文由 Mikko Ohtamaa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用文件对象获取 Gecko 和 webkit 支持的浏览器中的文件类型。

 var files =e.dataTransfer.files||e.target.files; // File list

文件对象返回名称、类型和大小。您也可以获得上次修改日期。

 var mimeType= files[0].type; //mime type of file list first entry

原文由 kongaraju 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 JavaScript 中测试文件类型有点麻烦，但是新版本的浏览器现在有 FileReader 对象，可以让你这样做。

这是对我的实现的不完整参考，它将缓冲区读取为 uint8 字节，然后检查输入是否为有效的 JPEG、GIF、PNG。显然，它会随着时间的推移而增强。要获得更完整的版本，请 在编辑器中查找 editor.js 文件和 snapwebsites 项目的 mimetype 插件。

 // The buffer is expected to be an ArrayBuffer() as read with a FileReader
_buffer2mime: function(buffer)
{
    buf = Uint8Array(buffer);
    if(buf[0] == 0xFF
    && buf[1] == 0xD8
    && buf[2] == 0xFF
    && buf[3] == 0xE0
    && buf[4] == 0x00
    && buf[5] == 0x10
    && buf[6] == 0x4A  // J
    && buf[7] == 0x46  // F
    && buf[8] == 0x49  // I
    && buf[9] == 0x46) // F
    {
        return "image/jpeg";
    }
    if(buf[0] == 0x89
    && buf[1] == 0x50  // P
    && buf[2] == 0x4E  // N
    && buf[3] == 0x47  // G
    && buf[4] == 0x0D  // \r
    && buf[5] == 0x0A) // \n
    {
        return "image/png";
    }
    if(buf[0] == 0x47  // G
    && buf[1] == 0x49  // I
    && buf[2] == 0x46  // F
    && buf[3] == 0x38  // 8
    && buf[4] == 0x39  // 9
    && buf[5] == 0x61) // a
    {
        return "image/gif";
    }

    // unknown
    return "";
},

_droppedImageAssign: function(e){
    var img,id;
    img = new Image();
    img.src = e.target.result;
    ++this._uniqueId;
    id="snap-editor-image-"+this._uniqueId;
    jQuery(img).hide().attr("id",id).appendTo(e.target.snapEditorElement);
    jQuery("#"+id).show();
},

_droppedImage: function(e){
    var mime, r, a, blob;

    mime = snapwebsites.EditorInstance._buffer2mime(e.target.result);
    if(mime.substr(0, 6) == "image/")
    {
        r = new FileReader;
        r.snapEditorElement = e.target.snapEditorElement;
        r.onload = snapwebsites.EditorInstance._droppedImageAssign;
        a = [];
        a.push(e.target.snapEditorFile);
        blob = new Blob(a, {type: mime}); // <- FORCE THE REAL MIME TYPE
        r.readAsDataURL(blob);
    }
},

jQuery("#some-object")
        .on("drop",function(e){
            // always prevent the default dropping mechanism
            // we handle the file manually all the way
            e.preventDefault();
            e.stopPropagation();

            // anything transferred on widget that accepts files?
            if(e.originalEvent.dataTransfer
            && e.originalEvent.dataTransfer.files.length)
            {
                accept_images = jQuery(this).hasClass("image");
                accept_files = jQuery(this).hasClass("attachment");
                if(accept_images || accept_files)
                {
                    for(i = 0; i < e.originalEvent.dataTransfer.files.length; ++i)
                    {
                        // read the image so we can make sure it is indeed an
                        // image and ignore any other type of files
                        r = new FileReader;
                        r.snapEditorElement = this;
                        r.snapEditorFile = e.originalEvent.dataTransfer.files[i];
                        r.onload = snapwebsites.EditorInstance._droppedImage;
                        // Get the first 64 bytes of the file to check the magic code
                        r.readAsArrayBuffer(r.snapEditorFile.slice(0, 64));
                    }
                }
            }

            return false;
        })

原文由 Alexis Wilke 发布，翻译遵循 CC BY-SA 4.0 许可协议