記事投稿機能と画像アップ機能とプレビュー機能

・画像をドラッグ＆ドロップを行う範囲
・入力するテキストエリア
・プレビュー
この三つを用意します。下記を参考に。

index.html

<div ondragover="onDragOver(event)" ondrop="onDrop(event)">
    <textarea id="text_input" rows="3">
    </textarea>
    <div id="content"></div>
</div>

プレビューはテキストエリアに入力された内容をそのまま#contentに表示させるだけです。

preview_jQuery.js

    $('#text_input').keyup(function() {
        var text = $('#text_input').val();

        $('#content').html(text);
    });

下記は参考にしたものを追加できるようにしたものです。

Image_upload.js

    // Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
    function onDrop(event) {
        // ブラウザ上でファイルを展開する挙動を抑止
        event.preventDefault();

        // ドロップされたファイルのfilesプロパティを参照
        var files = event.dataTransfer.files;
        for (var i=0; i<files.length; i++) {
            // 一件ずつアップロード
            imageFileUpload(files[i]);
        }
    }


    // ファイルアップロード
    function imageFileUpload(f) {
        var formData = new FormData();
        formData.append('image', f);
        $.ajax({
            type: 'POST',
            contentType: false,
            processData: false,
            url: '/admin/sync/img_uplodar',
            data: formData,
            success: function(data) {
                document.getElementById('text_input').value += data;
            }
        });
    }

参考にしたもの
https://qiita.com/uda0922/items/4e22908ce2acb3a28f29