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

用户2370664

我希望 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 文件?

迈克尔·弗罗明

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()我上面显示的限制我只能选择这两种文件类型。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

tinymce - 更改上传图片的 url 路径

来自分类Dev

Tinymce在cakephp中上传的图像

来自分类Dev

跳过tinymce图像上传模式

来自分类Dev

如何根据图片类型限制上传图片

来自分类Dev

Tinymce-将本地文件内容加载到Tinymce实例

来自分类Dev

TinyMCE由于htaccess重写器而上传文件JSON错误

来自分类Dev

如何获取TinyMce Ajax上传图像中文件的临时位置

来自分类Dev

Django文件浏览器tinymce-无法上传图像

来自分类Dev

使用 Laravel 上传 TinyMCE 图像,无需文件管理器

来自分类Dev

Tinymce + Filemanager =图片显示浏览按钮丢失

来自分类Dev

TinyMCE 4和图片网址

来自分类Dev

TinyMCE拖放图像上传问题

来自分类Dev

在tinymce 4中裁剪后上传图像

来自分类Dev

响应式FileManager出现tinyMCE上传错误

来自分类Dev

在tinymce 4中裁剪后上传图像

来自分类Dev

tinymce 中缺少与上传相关的浏览选项

来自分类Dev

限制文件类型上传组件

来自分类Dev

Vertx - 限制上传文件类型

来自分类Dev

TinyMCE:上传图片时如何保留相对URL,但使用“插入链接”选项时却使用绝对URL?

来自分类Dev

文件菜单中的TinyMCE保存按钮

来自分类Dev

从其他文件初始化tinyMce

来自分类Dev

Plone 5 TinyMCE,无法选择用于上传图像的文件夹

来自分类Dev

TinyMce映像上传后服务器的响应错误

来自分类Dev

图像上传到tinymce for asp.net MVC

来自分类Dev

TinyMCE无法在IE11中上传图像

来自分类Dev

果园cms中的Tinymce 4无法上传图像

来自分类Dev

使用Amazon S3上传Rails 5.2 TinyMCE图像

来自分类Dev

TinyMCE无法在IE11中上传图像

来自分类Dev

果园cms中的Tinymce 4无法上传图像