jQuery ajaxのアップロード結果をtextareaに挿入します。

Question

私はajaxのアップロード結果（単に[image UUID]タグの文字列）を挿入できるtextareaを使用してフォームを設計しています。ユーザーは、自分が望むように多くの画像をアップロードできます（適切な位置に調整できます）。

これは私の現在の作業です：

私は、サーバーに画像ファイルをアップロードするために、AJAXを使用し、サーバー（イメージ）ファイルを保存し、[画像UUID]の文字列を返信させていただきます。

そして、カーソルが残っている#textareaに[image UUID]文字列を自動挿入します。

上記の画像は機能しますが、バグがあり、醜いです。

• これはFirefoxでSafariの
• でもない作品に動作します。それはAJAXを2回トリガし、重複したファイルを送信しますが、理由はわかりません。
• [アップロード]ボタンは#textareaのすぐ下にあり、ユーザーにとっては直感的ではありません。
• #textareaのすぐ下にform2を移動した場合。 埋め込みフォームになります。 ajaxがファイルを送信すると、form2とform1がトリガーされ、form1がsubmitになります。

のForm2ののボタンを提出：

<form id="ajaxFileUploadForm" method="post" th:action="@{/user/doAjaxUpload}" enctype="multipart/form-data"> 
    <input type="file" name="ajaxFile" id="ajaxFile" class="btn btn-default"/> 
    <button value="Upload" class="btn btn-default" onclick="uploadJqueryForm()" id="uploadImageButton"> 
    insert image 
    </button> 
</form> 

とJSコード：

<script th:inline="javascript"> 

    (function ($, undefined) { 
     $.fn.getCursorPosition = function() { 
     var el = $(this).get(0); 
     var pos = 0; 
     if ('selectionStart' in el) { 
      pos = el.selectionStart; 
     } else if ('selection' in document) { 
      el.focus(); 
      var Sel = document.selection.createRange(); 
      var SelLength = document.selection.createRange().text.length; 
      Sel.moveStart('character', -el.value.length); 
      pos = Sel.text.length - SelLength; 
     } 
     return pos; 
     } 
    })(jQuery); 

    //using jquery.form.js 
    function uploadJqueryForm() { 
     $('#uploadImageButton').attr('disabled', 'disabled'); 

     $("#ajaxFileUploadForm").ajaxForm({ 
     success: function (data) { 
      console.log(data); 
      var position = $("#textarea").getCursorPosition(); 
      var content = $('#textarea').val(); 
      var newContent = content.substr(0, position) + "\n" + data + "\n" + content.substr(position); 
      $('#textarea').val(newContent); 
      $('#uploadImageButton').removeAttr('disabled'); 
     }, 
     dataType: "text" 
     }).submit(); 
    } 

    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script> 

は、#textarea真下ボタンを 'アップロード' サーバーを挿入することができます任意のより良い解決策は、あります#textarea（カーソルの位置）に返信し、ブラウザを完璧に動作させますか？

ありがとうございます！

Answer 1

ファイルや画像をアップロードする際にユーザーが直感的にできる別の解決策は、テキストエリア内をクリックするか、画像をテキストエリアにドラッグアンドドロップすることです。 http://www.dropzonejs.com/

ような多くのプラグインを使用できます。