Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2013, 23:28
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

вывод на экран загруженных фоток
Как осуществить вывод фоток на экран при множественной загрузке, и при этом регулировать их размер(даже если возможно с вашей стороны раскажите как перед выводом сделать кропинг изображения под размер при выводе 300х200

Есть множественная загрузка изображений через html форму

<input type="file" name="my-pic" id="file-field" class="image"/>

и нужно сделать множественный вывод этих изображений с кропингом в див
<div id="photo_copy" ><img src="" class="preview"></div>


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

$(function(){
    $(".image").change(showPreviewImage_click);
})

function showPreviewImage_click(e) {
    var $input = $(this);
    var inputFiles = this.files;
    if(inputFiles == undefined || inputFiles.length == 0) return;
    var inputFile = inputFiles[0];

    var reader = new FileReader();
    reader.onload = function(event) {
        $('.preview').attr("src", event.target.result);
    };
    reader.onerror = function(event) {
        alert("I AM ERROR: " + event.target.error.code);
    };
    reader.readAsDataURL(inputFile);
}


раскажите пожалуйста в подробностях и с примерами кода пожалуйста, заранее благодарен серверную сторону затрагивать не надо
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2013, 23:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

imediasun1,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <style type="text/css">
  .preview{
    max-height: 200px;
    max-width: 300px;
  }
  </style>
</head>

<body>
 <input type="file" name="my-pic" id="file-field" class="image"/>
 <div id="photo_copy" ></div>
 <script>
$(function(){
    $(".image").change(showPreviewImage_click);
})

function showPreviewImage_click(e) {
    var $input = $(this);
    var inputFiles = this.files;
    if(inputFiles == undefined || inputFiles.length == 0) return;
    var inputFile = inputFiles[0];
    var img = $('<img/>',{'class':'preview'});
    img.appendTo($('#photo_copy'))
    var reader = new FileReader();
    reader.onload = function(event) {
        img.attr("src", event.target.result);
    };
    reader.onerror = function(event) {
        alert("I AM ERROR: " + event.target.error.code);
    };
    reader.readAsDataURL(inputFile);
}
 </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2013, 00:08
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

Спасибо большое я думаю что я на верном пути благодаря вашей помощи, может еще подскажите, а если вместо дива там должен быть вот такой слайдер с миниатюрами
<div class="slider">
	<input type="radio" name="slide_switch" id="id1"/>
	<label for="id1">
		<img src="/slider-thumb-css/images/3yiC6Yq.jpg" width="45"/>
	</label>
	<img src="/slider-thumb-css/images/3yiC6Yq.jpg"/>
	
	<!--Lets show the second image by default on page load-->
	<input type="radio" name="slide_switch" id="id2" checked="checked"/>
	<label for="id2">
		<img src="/slider-thumb-css/images/40Ly3VB.jpg" width="45"/>
	</label>
	<img src="/slider-thumb-css/images/40Ly3VB.jpg"/>
	
	<input type="radio" name="slide_switch" id="id3"/>
	<label for="id3">
		<img src="/slider-thumb-css/images/00kih8g.jpg" width="45"/>
	</label>
	<img src="/slider-thumb-css/images/00kih8g.jpg"/>
	
	<input type="radio" name="slide_switch" id="id4"/>
	<label for="id4">
		<img src="/slider-thumb-css/images/2rT2vdx.jpg" width="45"/>
	</label>
	<img src="/slider-thumb-css/images/2rT2vdx.jpg"/>
	
	<input type="radio" name="slide_switch" id="id5"/>
	<label for="id5">
		<img src="/slider-thumb-css/images/8k3N3EL.jpg" width="45"/>
	</label>
	<img src="/slider-thumb-css/images/8k3N3EL.jpg"/>
</div>
Очень вам благодарен, спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2013, 00:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

imediasun1,
строки 27, 28, для вставки input label и второго img -- пробуйте понять и продублировать и строка 31 -- продублировать для второй картинки.
ваш код хочется видеть .
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2013, 00:30
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

<script>
$(function(){
	    $(".image").change(showPreviewImage_click);
	})
	 
	function showPreviewImage_click(e) {
	    var $input = $(this);
	    var inputFiles = this.files;
	    if(inputFiles == undefined || inputFiles.length == 0) return;
	    var inputFile = inputFiles[0];
		var radio = $('<input type="radio" name="slide_switch" id="id[?]"/>',{'class':'radio_slider'});
		var label = $('<label for="id[?]"/>',{'class':'radio_label'});
	    var img = $('<img/>',{'class':'preview'});
		var img2 = $('<img/>',{'class':'preview_mini'});
		radio.appendTo($('.slider'))
		label.appendTo($('.slider'))
	    img.appendTo($('.slider'))
		img2.appendTo($('.slider'))
	    var reader = new FileReader();
	    reader.onload = function(event) {
	        img.attr("src", event.target.result);
			img2.attr("src", event.target.result);
	    };
	    reader.onerror = function(event) {
	        alert("I AM ERROR: " + event.target.error.code);
	    };
	    reader.readAsDataURL(inputFile);
	}
</script>

По логике вещей должно быть что то вроде этого только проблема с базовыми знаниями jquery? подкорректируйте пожалуйста и я запомню(если можно с комментарием ), спасибо большое

Последний раз редактировалось imediasun1, 17.07.2013 в 00:44.
Ответить с цитированием
  #6 (permalink)  
Старый 17.07.2013, 01:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

imediasun1,
ок!
+ добавил множественную загрузку - коментировать пас -- читайте доки
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <style type="text/css">
  .preview{
    max-height: 200px;
    max-width: 300px;
  }
  .min {
    width: 45px;
  }

  </style>
</head>

<body>
 <input type="file" name="my-pic" id="file-field" class="image" multiple=""/>
 <div class="slider" ></div>
 <script>
 $(function()
   {
     $(".image").change(showPreviewImage_click);
   }
 )
 var num = 0;
 function showPreviewImage_click(e) {
   var $input = $(this);
   var inputFiles = this.files;
   if(inputFiles == undefined || inputFiles.length == 0) return;
   for (var i = 0; i<inputFiles.length; i++) {
     var id = 'id'+ ++num;
     var input = $('<input/>', {'type': "radio", 'name': "slide_switch", 'id': id});
     input.appendTo($('.slider'));
     var label = $('<label/>', {'for': id});
     var img_min = $('<img/>', {'class': 'min'});
     img_min.appendTo(label);
     label.appendTo($('.slider'));
     var inputFile = inputFiles[i];
     var img = $('<img/>', {'class': 'preview'});
     img.appendTo($('.slider'))
     var reader = new FileReader();

     reader.onload = (function (img1, img2)
       {
         return function(event) {
           img1.attr("src", event.target.result);
           img2.attr("src", event.target.result);
         };
       }
     )(img_min, img)

     reader.onerror = function(event) {
       alert("I AM ERROR: " + event.target.error.code);
     };

     reader.readAsDataURL(inputFile);}
 }
 </script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
построчный вывод текста на экран RIMs Общие вопросы Javascript 6 26.06.2012 11:38
Вывод переменных MasterHrust Javascript под браузер 4 03.08.2011 15:41
Вывод и обновления значений на экран. -Aleks- Events/DOM/Window 10 09.04.2011 13:36
Вывод div на экран Raik Prototype & script.aculo.us 3 26.12.2010 14:48
Загрузка фоток в форме ajax+php Suharik Серверные языки и технологии 14 12.10.2010 15:41