jQuery插入ajax上傳結果到textarea

Question

我正在設計一個帶有textarea的表單，它可以插入ajax上傳的結果（只是一個[image UUID]標籤的字符串）。以便用戶可以上傳儘可能多的圖像（並調整到適當的位置）。

這是我目前的工作：

我使用Ajax圖像文件上傳到服務器，和服務器將存儲（圖像）文件和回覆的[圖像UUID]字符串。

而且我希望將[image UUID]字符串自動插入光標所在的#textarea。

上面的圖片工作，但越野車和醜陋。

• 它可以在Safari
• 但不是在Firefox。它觸發AJAX兩次，發送重複的文件，我不知道爲什麼。
• 「上傳」按鈕遠在#textarea下面，對用戶來說不直觀。
• 如果我將form2直接移到#textarea下面。它變成嵌入形式。當ajax提交一個文件時，它會觸發form2和form1，使form1提交。

窗口2的提交按鈕：

<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

另一個解決方案，可以更直觀地爲您的用戶在上傳文件或圖像的過程中單擊文本區域或將圖像拖放到textarea中。您可以使用許多插件http://www.dropzonejs.com/

問候。