Question

我正在使用

https://github.com/Rovak/InlineAttachment

我目前已完成所有设置，因此我可以将图像拖放到我的textarea，然后从本教程开始直接上传到imgur：

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

我要做的是添加一个输入，所以如果用户不想拖放，他们可以简单地浏览他们的电脑并上传文件，让他们在选择时直接进入textarea。（只是github评论如何工作）

我似乎无法将输入插入到textarea中。

以下是一个实例：http://codepen.io/DrCustUmz/pen/KzZOeP

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

实际上没有提交，只需点击textarea下面的“选择它们”，拍下几张图片，然后在点击打开后观看textarea。

此示例中的输入选择不起作用。我怎么才能得到它所以我打开选择文件，选择一些图像，然后当我在浏览我的电脑弹出窗口中选择“打开”时，它们被直接插入到textarea中，就像我拖放它们一样。

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 on file。你只需要在回调中触发上传。假设您已将输入类型文件的id指定为“fileUpload”

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

如何将输入直接发送到textarea

2 个答案: