有没有更好的方法让HTML5 <input type =“file”/>与tinyMCE一起使用?

时间:2014-01-10 20:43:36

标签: javascript jquery html5 tinymce

我的目标是使用tinyMCE图像插件将图像文件直接上传到html内容区域。由于安全性和跨浏览器功能,我希望这使用文件上传控件。

我像这样设置TinyMCE:

        tinyMCE.init({
            selector: '.html-content',
            menubar: false,
            statusbar: false,
            toolbar: 'undo redo | image',
            plugins: 'image',
            file_browser_callback: this.getSystemFile
        });

getSystemFile的函数定义如下:

    function getSystemFile(field_name, url, type, win) {
        function upload($fileField, toUpload) {
            var self = this;
            var formData = new FormData($fileField.find('form')[0]);

            $.ajax({
                url: '/storage/creator_upload',
                type: 'POST',
                data: formData,
                processData: false,
                cache: false,
                contentType: false,
                dataType: 'json',
                success: function(json) {
                    if (json.errors) {
                        console.log(json.errors);
                    } else {
                        for (var i = 0; i < toUpload.length; i++) {
                            var file = toUpload[i];
                            var upload = {
                                descriptionTitle: '',
                                description: '',
                                lastModifiedDate: file.lastModifiedDate,
                                urls: json[i].urls,
                                displayName: file.name,
                                uploadLocation: json[i].location + json[i].extension,
                                location: json[i].urls.source,
                                type: file.type
                            };
                            if (upload.type.match('image.*')) {
                                $fileField.val(upload.location);
                            } else {
                                console.log('Not an Image');
                            }
                        }
                    }
                }
            });
        }

        var $fileField = $(win.document.getElementById(field_name));
        if ($fileField.find('form .form-image-upload').length > 0) {
            $fileField.find('form .form-image-upload')[0].reset();
        } else {
            $fileField.html('<form action="" class="form-horizontal form-image-upload" method="POST" enctype="multipart/form-data"><input type="file" name="files" style="display:none;"/></form>');
            var toUpload = [];
            $fileField.change(':file', function(event) {
                var fileSelection = event.target.files;
                for (var i = 0; i < fileSelection.length; i++) {
                    var file = fileSelection[i];
                    if (file.size > BcoreGlobal.maximumUploadSize) {
                        console.log('File exceeds the maximum upload size');
                        return false;
                    }
                    toUpload.push(file);
                }
                return upload($fileField, toUpload);
            });
        }
        $fileField.find(':file').click();
    }

虽然这有效,而且我能够上传文件,但我希望有更好的方法可以在tinyMCE中使用内置的filepicker类型,而不是附加新的表单。

0 个答案:

没有答案
相关问题