Кнопка для открытия диалогового окна с использованием HTML и JQuery

Question

Я создаю веб-приложение, которое разрабатывает веб-страницы. Я использую html5 для создания этого приложения. Я хочу создать кнопку, которая открывает диалоговое окно «Открыть», в котором пользователь может выбрать изображение или видео. После выбора изображение будет вставлено на страницу.

Я искал, но это делает меня более смущенным. Какие функции/методы и ссылки я предполагаю использовать?

Answer 1

Вы можете сделать некоторые работы стилизовать, но вот общая идея:

Допустим, у вас есть какой-то очень простой разметки, как это:

<input type='file' /> 
<img id="myImg" src="#" alt="your image" /> 

• Вы хотите подключиться к change событие <input type='file' />.
• После этого проверьте, были ли какие-либо файлы выбраны, и если да, то существует ли первый файл в массиве.
• Затем создайте новый объект FileReader. Мы расскажем об этом объекте две вещи:
  1. Когда он вызывает событие onload, он должен вызывать функцию imageIsLoaded.
  2. Затем возьмите данные из первого файла и прочитать его.
     
     • Когда это завершает это поднимет событие в шаге один

В JavaScript , это будет выглядеть так:

$(":file").change(function() { 
    if (this.files && this.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = imageIsLoaded; 
     reader.readAsDataURL(this.files[0]); 
    } 
}); 

function imageIsLoaded(e) { 
    $('#myImg').attr('src', e.target.result); 
}; 

В этом примере, когда изображение загружено, мы заменим исходный атрибут img, который мы имеем в разметке, в функции imageIsLoaded.

Working Demo In Fiddle

Answer 2

Вы хотите использовать

<input type="file"> 

Вы можете использовать HTML5 FileReader, чтобы получить файл локально сразу, или отправить его, чтобы сделать что-то на вашей стороне.