Is there a better way to get HTML5 <input type=file> to work with tinyMCE?

问题

My goal is to use the tinyMCE image plugin in order to upload image files directly into the html content area. I want this to use the file upload control because of security and cross browser functionality.

I setup TinyMCE like so:

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

And the function for getSystemFile is defined as so:

    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();
    }

While this works, and I am able to upload the file, I was hoping that there might be a better way to use the built in filepicker type in tinyMCE instead of appending a new form.

来源：https://stackoverflow.com/questions/21054052/is-there-a-better-way-to-get-html5-input-type-file-to-work-with-tinymce