OpenFile test

accept=».txt» — чтобы для выбора были доступны только текстовые файлы

При клике на кнопке выполняем клик на скрытом стандартном элементе с id=»myfile».

document.getElementById("choosefile").onclick = function()< document.getElementById("myfile").click(); >

Чтение и вывод текстового файла

Результат выбора пользователя доступен как массив, даже когда может быть выбран только один файл, и это первый файл в массиве, т.е. с индексом 0.

document.getElementById("myfile").onchange = function(e) < if (this.files==undefined) < // Отмена return; >// Покажем имя файла this.files[0].name document.getElementById("thefile").innerHTML="Вы выбрали файл " + this.files[0].name; // Чтение файла readtheFile(this); // если нужно, чтобы событие onchange происходило при выборе того же файла this.value = null; > // .onchange function readtheFile(object) < var file = object.files[0]; var reader = new FileReader(); reader.onload = function() < let rows = reader.result.split('\r\n'); // массив строк текстового файла var srt=""; rows.forEach(function(entry) < str+="
" + entry + "
"; >); // Покажем содержимое текстового файла document.getElementById('out').innerHTML = str; > reader.readAsText(file); >; //readtheFile(object)

Как вывести изображение, выбранное через input

Чтобы получить src, например, для img, можно использовать readAsDataURL

document.getElementById("imgfile").onchange = function() < if (this.files==undefined) < return;>var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) < var image = document.createElement("img"); image.src = e.target.result; document.getElementById('outimg').appendChild(image); >reader.readAsDataURL(file); >

document.getElementById("imgfile").onchange = function() < if (this.files==undefined) < return;>var file = this.files[0]; var image = document.createElement("img"); image.src = URL.createObjectURL(file); document.getElementById('outimg').appendChild(image); >

Добавить комментарий Отменить ответ

Поиск по сайту:

Полезное

• Search documentation on wordpress.org
• Как узнать id в WordPress
• Как подключить JavaScript-код и CSS-стили в WordPress
• Color Blender Подбор цветовой палитры
• Whois (IPv4 и IPv6) и проверка на вирусы, Your IP

Следи за своими сайтами!
Список сайтов в Яндекс.Метрике

Рубрики

• Apache (4)
  • htaccess (3)
  • WordPress-рецепты (8)
  • Навигация (4)
  • Плагины WordPress (14)
  • Подписка на блог (2)
  • Проблемы (12)
  • Создание и изменение темы (9)
    • Самая простая тема для WordPress (2)
    • CSS (3)
    • JavaScript (8)
      • Learning jQuery (1)
      • Браузеры (3)
      • Домен и хостинг (1)
      • Инструменты Google (2)
      • SnagIt (1)

      Комментарии

      • Леонид к записи Простая карта сайта для WordPress
      • Admin к записи Если не загружаются файлы в WordPress
      • Марина к записи Если не загружаются файлы в WordPress
      • Mobile2blogger к записи Создание плагина: шорткоды
      • Jack к записи Функция has_cap вызвана с устаревшим аргументом

      Метки

      На этом сайте используются куки для наилучшего представления содержимого. Если вы продолжите просматривать сайт, мы будем считать что вас это устраивает. Подробнее Понятно

      Источник

      Полностью своя кнопка «Выбрать файл»

      Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input[type=file] для адаптивного сайта… И да — все работает в IE, начиная с 9 версии.

      Цель: создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).
      Инструменты: CSS, PHP, JavaScript.
      Используемые технологии: Ajax, через скрытый iframe.

      Преамбула

      Из кода для упрощения сознательно выкинуты все процедуры проверки принятого файла и try-catch вызовов функций, так как эти моменты не являются темой данной статьи. Также не охватывается момент по предотвращению звукового сигнала в IE. В работе используем технологию Ajax, подразумевающую, что у нас есть основная страница, осуществляющая взаимодействие с пользователем(front-end) и скрипт на сервере, обрабатывающая наши запросы(back-end)

      Технология работы

      1. На главной странице создаем «form action» Делаем ей target на скрытый фрейм, который создаем статически (или динамически). Создаем два «input» с типом «file» и «submit», даем им «id», помещаем их в «div», который спрячем со страницы стилем. Все эти элементы не видимы для пользователя и не воспринимают каких-либо его действий.
      2. Начинаем «магию». Для «input» с типом «file» на событие по изменению вешаем вызов функции onchange=«LoadFile();».
      3. На главной странице создаем кнопку. Навешиваем ей на событие нажатия кнопки мыши вызов функции onclick=«FindFile();».
      4. В функции FindFile() имитируем клик на «input» с типом «file». То есть при нажатии на нашу кнопку вызывается стандартный диалог выбора файла. Как только пользователь выбрал файл, срабатывает событие onchange и вызывается функция LoadFile(). В функции LoadFile() имитируем клик на «input» с типом «submit».
      5. Форма формирует POST запрос с именем файла к нашему back-end скрипту, который осуществляет все проверки по безопасности и загрузку файла. После этого скрипт вызывает callback функцию главной страницы, которой сообщает о результате выполнения.

      Собственно все. Для примера приведены четыре основных файла, код которых приведён ниже:

      css/style.css – стили главной страницы
      view/upload.php – back-end скрипт загрузки файла
      index.php – главная страницы
      js/upload.js – front-end скрипты главной страницы

      Кроме того, необходим любой файл с картинкой для кнопки buttons/openfile.png

      Загружаемые файлы помещаем в директорию ../temp/

      .navButtons < border:1px gray solid; position:absolute; overflow: hidden; display:block; height:50px; width:50px; margin:10px; -moz-box-shadow:5px 5px 7px rgba(3,33,33,.7); -webkit-box-shadow: 5px 5px 7px rgba(3,33,33,.7); box-shadow: 5px 5px 7px rgba(3,33,33,.7); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; >.navButtons:hover < border:2px solid black; background-color:#fff; >.hiddenInput < position:absolute; overflow: hidden; display:block; height:0px; width:0px; >Input мы просто делаем нулевой ширины и высоты 

       window.parent.onResponse("'.$obj.'"); '; > // определяем куда скопируем файл пользователя $dir = '../temp/'; $name = basename($_FILES['loadfile']['name']); $file = $dir . $name; //копируем файл и получаем результат $success = move_uploaded_file($_FILES['loadfile']['tmp_name'], $file); //вызываем callback функцию и передаем ей результат jsOnResponse(""); ?> 

      function FindFile() < document.getElementById('my_hidden_file').click(); >function LoadFile() < document.getElementById('my_hidden_load').click(); >function onResponse(d) // Функция обработки ответа от сервера < eval('var obj = ' + d + ';'); if(obj.success!=1) < alert('Ошибка!\nФайл ' + obj.filename + " не загружен - "+obj.myres); return; >; alert('Файл загружен'); > 

      Источник

      Open Select File Dialog Box Using JavaScript

      In this tutorial we will see how to Open Select File Dialog Box Using JavaScript. The HTML DOM click() Method is used for this which will open select file box when normal HTML button is clicked.

      HTML Code

      HTML Code is given below, This code contains an input element and a button element.

             Select File   

      .click() Method

      The HTML DOM click() Method is used to simulate the mouse click for the selected HTML element.

      The click method will execute a click for an element as if the user has actually clicked on that element.

      It is supported by all major browsers.

      getElementById() Method

      The getElementById() Method is used to get or select or target the HTML element with a specified value of Id attribute.

      In this example the id of input element is ‘file’. This id is used to target the input element.

      It is also supported by all major browsers.

      JavaScript Code

      In this example onclick event will trigger the main function when button is clicked. The main function will then select the input element using getElementById method and it will open the select file dialog box using the .click() method.

      Take a look at the code given below.

      Источник

      Как открыть диалог выбора файла через JS?

      Он не работает в Chrome 26 на Mac OS = ( Проблема заключается в создании виджета «upload», который может быть интегрирован в форму. Виджет будет состоять из двух частей. Первая часть — div с кнопкой инициатора и сообщения об ошибке/успехе. Я думаю, что путь помещается в другую форму как вторую часть с вводом файла и отправкой файла в iframe. После представления мы заполняем скрытое поле в первой части в основной форме или показываем ошибки в том же самом. Легкий способ добавления файловой формы в основную форму, но это запрещено. Исправьте меня.

      Вы хотите просто стилизовать элемент ввода загрузки? чтобы он не выглядел по умолчанию, а, например, как кнопка?

      7 ответов

      Использование jQuery

      Я бы создал кнопку и невидимый вход вроде этого

      и добавьте несколько jQuery для его запуска:

      Использование Vanilla JS

      Такая же идея, без jQuery (кредиты @Pascale)

      Я использовал ту же технику (в чистом js: form.file_selector.click ();), где file_selector — это динамически добавляемый файл ввода (добавляется innerHTML). Но это не работает. Любая помощь или предложения, пожалуйста?

      @fekirimalek Возможно, добавьте прослушиватель событий после добавления файла ввода. Иначе создайте вопрос @ Stack Overflow

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

      Только JS — нет необходимости в jquery

      Просто создайте элемент ввода и запустите щелчок.

      var input = document.createElement('input'); input.type = 'file'; input.click(); 

      Это самое простое, всплывающее диалоговое окно выбора файла, но его бесполезно без обработки выбранного файла.

      Обработка файлов

      Добавление события onchange во вновь созданный вход позволит нам делать что-то, как только пользователь onchange файл.

      var input = document.createElement('input'); input.type = 'file'; input.onchange = e => < var file = e.target.files[0]; >input.click(); 

      На данный момент у нас есть файловая переменная, хранящая различную информацию:

      file.name // the file name including extension file.size // the size in bytes file.type // file type ex. 'application/pdf' 

      Но что, если нам нужно содержимое файла?

      Для того, чтобы получить фактическое содержание файла, по разным причинам. поместите изображение, загрузите на холст, создайте окно с URL-адресом Base64 и т.д. нам нужно будет использовать API FileReader

      Мы должны создать экземпляр FileReader и загрузить ссылку на выбранный пользователем файл.

      var input = document.createElement('input'); input.type = 'file'; input.onchange = e => < // getting a hold of the file reference var file = e.target.files[0]; // setting up the reader var reader = new FileReader(); reader.readAsText(file,'UTF-8'); // here we tell the reader what to do when it done reading. reader.onload = readerEvent => < var content = readerEvent.target.result; // this is the content! console.log( content ); >> input.click(); 

      При попытке вставить приведенный выше код в ваше окно консоли devtool, должно появиться диалоговое окно выбора файла, после выбора файла консоль теперь должна распечатать содержимое файла.

      Пример — «Stackoverflow новое фоновое изображение!»

      Давайте попробуем создать диалог выбора файла, чтобы изменить фоновое изображение stackoverflows на что-то более пряное.

      var input = document.createElement('input'); input.type = 'file'; input.onchange = e => < // getting a hold of the file reference var file = e.target.files[0]; // setting up the reader var reader = new FileReader(); reader.readAsDataURL(file); // this is reading as data url // here we tell the reader what to do when it done reading. reader.onload = readerEvent => < var content = readerEvent.target.result; // this is the content! document.querySelector('#content').style.backgroundImage = 'url('+ content +')'; >> input.click(); 

      откройте devtools и вставьте приведенный выше код в окно консоли, после чего должно появиться диалоговое окно выбора файла, при выборе изображения фон окна содержимого stackoverflow будет меняться на выбранное изображение.

      Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код. Также постарайтесь не переполнять ваш код пояснительными комментариями, это снижает удобочитаемость кода и пояснений!

      Отлично. Но у меня были проблемы, чтобы заставить это работать на Safari iOS. Событие onchange не сработало.

      Смотрите здесь, как получить доступ к файлу: developer.mozilla.org/en-US/docs/… document.getElementById(‘input’).files[0];

      Изменить: Я не тестировал это в WebKit, он фактически не работает с , но он должен работать с большинством других элементов — по крайней мере, в последних браузерах (не уверен о более старых).

      Проверьте эту скрипту с помощью кода выше.

      Для полноты, Рон ван дер Хейден решение в чистом JavaScript:

      Источник