2016-04-09 6 views
0

Я используюкак я могу отправить вход прямо в текстовое поле

https://github.com/Rovak/InlineAttachment 

настоящее время у меня это все настройки, так что я могу перетащить изображения в моем текстовое поле, и они загрузить прямо в Imgur из следующих этого учебника:

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

, что я пытаюсь сделать, это добавить ввод поэтому, если оленья кожа пользователь хочет перетащить, они могут просто просматривать их компьютер и загружать файлы, и они идут прямо в текстовое поле при выборе. (как работает работа github)

Я просто не могу получить вход для ввода в текстовое поле.

Вот живой пример: http://codepen.io/DrCustUmz/pen/KzZOeP

или если ваш вход в GitHub вы можете увидеть конечную цель, что им пытаются сделать: https://github.com/wilfreddenton/dynamic-scss/issues/new

DonT на самом деле представить, но нажмите кнопку «выбрать их» ниже текстового поля, pic несколько изображений и смотреть текстовое поле после того, как вы нажмете кнопку «Открыть».

выбор ввода не работает в этом примере. Как я могу получить его, поэтому я открываю файлы, выбираю несколько изображений, а затем, когда я выбираю «открывать» на всплывающем всплывающем окне, они непосредственно вставляются в текстовое поле, так же, как я перетаскиваю их.

ответ

1

Большая часть авторских работ выполняется в фоновом режиме, поэтому мне пришлось переписать текст на текстовое поле. Извините, я в основном использую чистый 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

+0

с result.filename, как я могу постучать, что в [IMG] теги и добавить разрыв между каждой из них? –

+0

просто замените result.filename на "\ n [IMG]" + result.filename + "[IMG] \ n". – adsamcik

+0

это отлично =) спасибо, IMG-тэг бросает ошибку, хотя это правильно? editor.value = editor.value.replace ("uploading ...", \ n [IMG] "+ result.filename +" [/ IMG] \ n); –

1

Вы можете просто прикрепить EventListener UPoN файл выбран с помощью выбора опции файлов. Вам просто нужно вызвать загрузку в обратном вызове. Предположим, что вы дали идентификатор типа входного файла как «FileUpload»

document.getElementById('fileUpload').addEventListener('change', function() { 
       console.log(this.files); 
       /*trigger the upload here, like you're doing in drag and drop*/ 
      }); 
Смежные вопросы