Смена картинки при нажатии

@AlexWIIIIN · Регистрация: 13.02.2017

Author24 — интернет-сервис помощи студентам

Есть форма,которая меняет картинку при клике.

HTML5

1	<img src="box.jpg" onclick='this.src="lut_1.jpg"' />

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

Jabbson · 24.02.2017, 00:59

так не подойдет?

HTML5

1 2	<input type='file' /> <img id="myImg" src="//:0" alt="your image" />

Javascript

$(function () {
    $(":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);
};

@Опан · 24.02.2017, 10:47

Без jQuery так получается:

HTML5

1 2	<img id=myImg src="box.jpg" /> <input type=file id=myfile>

Javascript

<script>
myfile.onchange = function() {
    if (this.files && this.files[0]) {
        var reader=new FileReader();
        reader.onload = function(e){
            myImg.src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);
    };
};
</script>

@AlexWIIIIN · 24.02.2017, 15:12 **[ТС]**

Нее, нужно так: есть картинка, и ее надо поменять на любую картинку из компьютера

Добавлено через 5 минут

HTML5

<html>
      <head>
         <title></title>
      </head>
      <body>
           <link rel="stylesheet" type="text/css" href="/style.css" />
          <table border="1">
          <tr>  
        </td>
             <td>
                  <label>
                       <img src="3.jpg" alt="">
                      <input type="file" hidden>
                  </label>
      </body>
</html>

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

@Опан · 24.02.2017, 18:07

Присвойте картинке и скрытой кнопке выбора ID, на пример myImg и myfile, и допишите функцию из предыдущего моего поста.

@AlexWIIIIN · 24.02.2017, 19:32 **[ТС]**

А ты можешь код полностью написать...?) А то чет я туплю после вчерашнего)

Добавлено через 23 минуты

PHP/HTML

<html>
      <head>
         <title></title>
         <script>      
     myImg.onchange = function() {
    if (this.files && this.files[0]) {
        var reader=new FileReader();
        reader.onload = function(e){
            myImg.src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);
      };
   };
  </script>
      </head>
 
     
      <body>
          <table border="1">
          <tr>  
        </td>
             <td>
                  <label>
                       <img id="myImg" src="3.jpg" alt="">
                      <input type="file" id="myfile">
                  </label>
      </body>
</html>

Сделал все ка ты сказал, то шибка где то тут

Javascript

1	myImg.onchange = function() {

Написано в консоле, что индификатор не найден

@Опан · 24.02.2017, 19:49

Тут просто ошибка, нужно myfile.onchange:

HTML5

<table border="1">
    <tr>  
        <td>
            <label>
                <img id=myImg src="x80.jpg" alt="">
                <input id=myfile type="file" hidden>
            </label>
        </td>
    </tr>
</table>

Javascript

<script>
myfile.onchange = function() {
    if (this.files && this.files[0]) {
        var reader=new FileReader();
        reader.onload = function(e){
            myImg.src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);
    };
};
</script>

@AlexWIIIIN · 24.02.2017, 20:12 **[ТС]**

СПАСИБО, ВСЕ ЗАРАБОТАЛО! И да, как теперь сделать, чтоб когда я залью этот скрипт на хостинг, каждый пользователь, зайдя на сайт, мог изменить картинку на свою, и чтоб она сохранилась на хостинг?

@Опан · 24.02.2017, 20:58

Для этого нужен серверный язык, на пример PHP.

@AlexWIIIIN · 24.02.2017, 21:03 **[ТС]**

Так, окей. Тогда пследнее: как сделать чтобы все картинки, которые загружаем, были одного разрешения в ячейке?)

@Опан · 24.02.2017, 21:28

Вариант по-проще - это задать размеры картинки:

HTML5

1	<img id=myImg src="3.jpg" width=100 height=100 alt="">

Но так она может оказаться сплюснутой. Ещё как-то делают, чтобы показывалась не вся, только часть картинки заданных размеров и в правильной пропорции масштаба по ширине и высоте. Но я с ходу не знаю, нужно подумать.

@AlexWIIIIN · 24.02.2017, 21:47 **[ТС]**

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

@Опан · 24.02.2017, 22:33

Значит по умолчанию поставьте кнопке атрибут disabled:

HTML5

1	<input id=myfile type="file" hidden disabled>

а в код приёма подтверждения оплаты в конце добавить добавить:

Javascript

1	myfile.disabled=false;

@AlexWIIIIN · 25.02.2017, 10:25 **[ТС]**

Смотри.Вставил ссылку на картинку

HTML5

<html>
      <head>
         <title></title>
      </head>
      <body>
       
        <table border="1">
    <tr>  
        <td>
            <label>
               <a href="оплата.html"><img id=myImg src="image.jpg" width=100 height=100 alt=""></a>
               <input id=myfile type="file" hidden disabled>
              
            </label>
        </td>
    </tr>
</table>
<script src="script.js"></script>
 
      </body>
</html>

, переход идет на обычную форму оплаты яндекс

HTML5

<html>
      <head>
         <title></title>
      </head>
      <body>
           <div align=center>
           <iframe frameborder="0" allowtransparency="true" scrolling="no" src="https://money.yandex.ru/quickpay/shop-widget?account=410013045780806&quickpay=shop&payment-type-choice=on&mobile-payment-type-choice=on&writer=seller&targets=12214&targets-hint=&default-sum=&button-text=01&successURL=" width="450" height="198" myfile.disabled=false; ></iframe>
           </div>
      </body>
</html>

. Получается так: я нажимаю на картинку, меня кидает на страницу оплаты, я оплачиваю,вручную перехожу обратно на ту страницу, и теперь меняю картинку? так?

@Опан · 25.02.2017, 11:35

Вот с оплатой яндекс я когда-то имел дело, но сейчас не помню. Если с неё обратно нужно возвращаться вручную, то после того, как администратор убедится, что его счёт пополнен, просто он должен снять для пользователя этот атрибут disabled, но опять же это нужно на PHP, так как на хостинге должен быть сохранён статус этого пользователя, как уплатившего.

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	24.02.2017, 18:07	5
	Присвойте картинке и скрытой кнопке выбора ID, на пример myImg и myfile, и допишите функцию из предыдущего моего поста. 0

@AlexWIIIIN 0 / 0 / 0 Регистрация: 13.02.2017 Сообщений: 38
	24.02.2017, 20:12 [ТС]	8
	СПАСИБО, ВСЕ ЗАРАБОТАЛО! И да, как теперь сделать, чтоб когда я залью этот скрипт на хостинг, каждый пользователь, зайдя на сайт, мог изменить картинку на свою, и чтоб она сохранилась на хостинг? 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	24.02.2017, 20:58	9
	Для этого нужен серверный язык, на пример PHP. 1

@AlexWIIIIN 0 / 0 / 0 Регистрация: 13.02.2017 Сообщений: 38
	24.02.2017, 21:03 [ТС]	10
	Так, окей. Тогда пследнее: как сделать чтобы все картинки, которые загружаем, были одного разрешения в ячейке?) 0

@AlexWIIIIN 0 / 0 / 0 Регистрация: 13.02.2017 Сообщений: 38
	24.02.2017, 21:47 [ТС]	12
	вот еще что нужно : чтобы загрузить свою картинку в ячейку,нужно сначало заполнить форму(Ну или оплатить эту ячейку., а уже после "Оплаты можно было бы загрузить свою картинку)" 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	25.02.2017, 11:35	15
	Вот с оплатой яндекс я когда-то имел дело, но сейчас не помню. Если с неё обратно нужно возвращаться вручную, то после того, как администратор убедится, что его счёт пополнен, просто он должен снять для пользователя этот атрибут disabled, но опять же это нужно на PHP, так как на хостинге должен быть сохранён статус этого пользователя, как уплатившего. 0

Смена картинки при нажатии

Решение