如何将输入直接发送到文本区域

Question

我正在使用

https://github.com/Rovak/InlineAttachment

我目前已完成所有设置，因此我可以将图像拖放到我的文本区域，然后它们直接上传到 imgur，遵循本教程：

http://wilfreddenton.com/posts/drag-and-drop-photo-uploads-to-imgur

我想做的是添加一个输入，这样如果用户不想拖放，他们可以简单地浏览他们的电脑并上传文件，然后让他们直接进入文本区域 select离子。（github 评论的工作原理）

我似乎无法将输入内容插入文本区域。

这是一个活生生的例子：http://codepen.io/DrCustUmz/pen/KzZOeP

或者，如果您登录 github，您可以看到我试图做的最终目标：https://github.com/wilfreddenton/dynamic-scss/issues/new

其实不提交，点击textarea下面的"selecting them"，拍几张图，点开后看textarea

输入 selection 在此示例中不起作用。我怎样才能得到它所以我打开选择文件，select一些图像，然后当我select "open"在浏览我的电脑弹出窗口时，它们直接插入到文本区域中，只是就像我拖放它们一样。

Answer 1

大部分的写作工作都是在后台完成的，所以我不得不将写作重写到textarea。抱歉，我主要使用纯粹的 javascript，所以我没有使用任何花哨的 jquery 功能。

这就是魔法发生的地方。上传一次只能处理一个文件，所以我不得不对所有文件使用循环。我建议你看一下整个代码。

document.getElementById("inputFile").addEventListener("change", function() {
  var object = this;
  var editor = document.getElementById("editor");
  for(var i=0;i<this.files.length;i++) {
    editor.value += "uploading...";
    uploadHandler.customUploadHandler(this.files[i], function(result) { 
      editor.value = editor.value.replace("uploading...",result.filename);
    });
  }
});

Whole code on CodePen

Answer 2

您可以简单地在通过选择文件选项选择文件时附加 eventListener。您只需要在回调中触发上传即可。假设您已将输入类型文件的 id 指定为 "fileUpload"

document.getElementById('fileUpload').addEventListener('change', function () {
                console.log(this.files);
                /*trigger the upload here, like you're doing in drag and drop*/
            });

如何将输入直接发送到文本区域

how can I send input straight to textarea

html

javascript

jquery

textarea

input