Question

我正在设计一个带有textarea的表单，可以插入ajax上传的结果（只是一串[image UUID]标签）。这样用户就可以按照自己的意愿上传尽可能多的图像（并调整到正确的位置）。

这是我目前的工作：

我使用ajax将图像文件上传到服务器，服务器将存储（图像）文件并回复[image UUID]字符串。

我想将[image UUID]字符串自动插入光标所在的#textarea。

上面的图片很有效，但是有点儿和丑陋。

适用于Safari
但不适用于Firefox。它触发AJAX两次，发送重复文件，我不知道为什么。
“上传”按钮远远低于#textarea，对用户来说并不直观。
如果我将form2直接移到#textarea下面。它变成嵌入形式。当ajax提交文件时，它将触发form2和form1，使form1提交。

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下面设置'upload'按钮，插入服务器回复#textarea（光标的位置），并且可以完美地跨浏览器工作？

非常感谢！

Answer 1

在上传文件或图片的过程中，您的用户可以更直观的另一种解决方案是在textarea中单击或将图像拖放到textarea中。您可以使用许多插件，例如http://www.dropzonejs.com/

问候。

jQuery将ajax上传结果插入textarea

1 个答案: