TinyMCE 图像上传。限制文件类型

Question

我希望 TinyMCE 文件选择器只允许用户选择 .png 和 .jpg 文件类型。这是我的初始化：

tinymce.init({
    selector: '#txtMessage',
    plugins: [
      'advlist lists link image charmap print preview hr',//anchor pagebreak autolink
      'searchreplace wordcount fullscreen',  //visualchars  visualblocks code
      'insertdatetime save table contextmenu directionality',//media nonbreaking
      'emoticons paste textcolor colorpicker textpattern imagetools table' 
    ],
    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    toolbar2: 'print preview media | forecolor backcolor emoticons | codesample | table',
    image_advtab: true,
    relative_urls: false,
    remove_script_host: false,
    convert_urls: true,
    force_br_newlines: false,
    force_p_newlines: false,
    forced_root_block: 'p',
    encoding: "UTF-8",
    automatic_uploads: true,
    images_upload_url: '@Url.Action("Upload", "Home", this.Request.Url.Scheme)',
    file_picker_callback: function (cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

        input.onchange = function () {
            var file = this.files[0];
            var id = 'blobid' + (new Date()).getTime();
            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
            var blobInfo = blobCache.create(id, file);
            blobCache.add(blobInfo);                
            cb(blobInfo.blobUri(), { title: file.name });
        };
        input.click();
    }
});

在file_picker_callback我试过了：

file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*.png, image/*.jpg');

这不起作用，因为所有文件类型都可供选择。有没有办法限制文件选择器只允许 .png 和 .jpg 文件？

Answer 1

accept 属性允许您比image/* 更具体，但我认为您的格式已关闭。在实际的图像标签中，您可以这样做：

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

所以尝试一下：

input.setAttribute('accept', 'image/jpg, image/gif');

这是一个 TinyMCE Fiddle，它展示了这一点：

http://fiddle.tinymce.com/ROgaab

我没有将文件选择器连接到任何东西，所以一旦你选择了文件，它实际上不会做任何事情，但设置 input.setAttribute() 就像我上面展示的那样限制我只选择这两种文件类型。