PHP Lang
  1. PHP Lang
  3. перетащить файлы входных изображений и предварительный просмотр перед загрузкой
Intereting Posts
XML-объект RPC без объекта на скалярном zf2 Проверка коллекции форм – уникальные элементы в наборах полей Почему напечатано последнее число (1)? Что случилось с этим назначением json-объекта с php на javascript? jQuery Синхронизация часовых поясов FullCalendar Как получить адрес gzip в виде ответа PHP Как определить, работает ли на localhost Передача неустановленных переменных в функции Вызвать программу C из php и прочитать вывод программы Как получить случайное изображение из каталога с помощью PHP как сделать эхо-печать прямо сейчас на PHP? Закрытие тега PHP – когда это необходимо? Как изменить макет темы в Opencart? IIS PHP не регистрирует ошибки в файле журнала Переадресация случайно из index.html в другой файл

перетащить файлы входных изображений и предварительный просмотр перед загрузкой

Я хочу создать функцию перетаскивания перетаскивания div, и когда кто-то щелкнет по ней, они смогут выбрать свое изображение.

Я кое-что закодировал, и его можно – щелкнуть div и выбрать ваше изображение – предварительно просмотреть изображение перед загрузкой

вы можете проверить мою скрипку

CSS 

.uploader {width:300px;height:350px;background:#f3f3f3;border:2px dashed #e8e8e8;}

Javascript 

  var imageLoader = document.getElementById('filePhoto'); imageLoader.addEventListener('change', handleImage, false); function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { $('.uploader').html( '<img width="300px" height="350px" src="'+event.target.result+'"/>' ); } reader.readAsDataURL(e.target.files[0]); }

HTML 

 <div class="uploader" onclick="$('#filePhoto').click()">click here or drag here your images for preview and set userprofile_picture data</div> <input type="file" name="userprofile_picture" id="filePhoto" style="display:block;width:185px;" />

вы можете проверить http://jsfiddle.net/ELcf6/

Вы можете сделать это с небольшими трюками css. элемент ввода принимает падение. Я изменил ваш код, как показано ниже:

CSS 

 .uploader { position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8; } #filePhoto{ position:absolute; width:300px; height:400px; top:-50px; left:0; z-index:2; opacity:0; cursor:pointer; } .uploader img{ position:absolute; width:302px; height:352px; top:-1px; left:-1px; z-index:1; border:none; } направо .uploader { position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8; } #filePhoto{ position:absolute; width:300px; height:400px; top:-50px; left:0; z-index:2; opacity:0; cursor:pointer; } .uploader img{ position:absolute; width:302px; height:352px; top:-1px; left:-1px; z-index:1; border:none; } направо .uploader { position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8; } #filePhoto{ position:absolute; width:300px; height:400px; top:-50px; left:0; z-index:2; opacity:0; cursor:pointer; } .uploader img{ position:absolute; width:302px; height:352px; top:-1px; left:-1px; z-index:1; border:none; }

Javascript 

 var imageLoader = document.getElementById('filePhoto'); imageLoader.addEventListener('change', handleImage, false); function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { $('.uploader img').attr('src',event.target.result); } reader.readAsDataURL(e.target.files[0]); }

HTML 

 <div class="uploader" onclick="$('#filePhoto').click()"> click here or drag here your images for preview and set userprofile_picture data <img src=""/> <input type="file" name="userprofile_picture" id="filePhoto" /> </div>

Я надеюсь, что это помогает. Вы можете проверить http://jsfiddle.net/ELcf6/4/ и другую версию http://jsfiddle.net/ELcf6/8/