亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

jQuery onload 代碼如何可重復用于縮略圖 2 和 3

jQuery onload 代碼如何可重復用于縮略圖 2 和 3

絕地無雙 2022-12-22 14:50:38
我正在構建的應用程序具有三個輸入 [type="file"]。第一個上傳輸入目標是縮略圖 1，第二個上傳輸入目標是第二個縮略圖，依此類推。jQuery 加載代碼適用于第一個縮略圖。有沒有辦法在不重復代碼的情況下使代碼可重復用于縮略圖 2 和 3？$(window).on('load', function() {  var files = $("input[type=file]");  files.change(function(e) {    if (this.files && this.files[0]) {      var reader = new FileReader();      reader.onload = function(e) {        $(".thumbnail-one img").attr("src", e.target.result);        $('.full-image img').attr("src", e.target.result);      }      reader.readAsDataURL(this.files[0]);    }  });});$(document).ready(function() {  $('.box').click(function() {    $('.full-image').html($(this).html());    console.log(this);  });});body {  font-family: 'Poppins', Verdana, Arial, sans-serif;}fieldset {  background-color: lavender;  border: 10px solid darkblue;  border-radius: 20px;  margin: 20px auto;  width: 720px;}legend {  background-color: purple;  border-radius: 10px;  color: white;  padding: 12px;}fieldset div {  margin: 10px;}label {  display: inline-block;  text-align: right;  vertical-align: top;  width: 200px;}.container {  width: 60%;  overflow: hidden;  margin: 100px auto;}.box {  width: 100px;  height: auto;  padding: 10px;}.box {  cursor: pointer;}.full-image {  width: 580px;  height: 580px;  padding: 10px;}.col {  float: right;}.full-image img {  width: 100%;  /* height: 100%; */}.closebtn {  position: absolute;  top: 10px;  right: 15px;  color: white;  font-size: 35px;  cursor: pointer;}
查看完整描述

2 回答

?
慕尼黑8549860

TA貢獻1818條經驗 獲得超11個贊

function imgUploaded(event, thumbnail){

    var fileInput = event.target;

    if (fileInput.files && fileInput.files[0]) {

      var reader = new FileReader();

      reader.onload = function(e) {

        $("." +thumbnail +" img").attr("src", e.target.result);

        $('.full-image img').attr("src", e.target.result);

      }

      reader.readAsDataURL(fileInput.files[0]);

  }

}



$(document).ready(function() {

  $('.box').click(function() {

    $('.full-image').html($(this).html());

  });

});

body {

  font-family: 'Poppins', Verdana, Arial, sans-serif;

}


fieldset {

  background-color: lavender;

  border: 10px solid darkblue;

  border-radius: 20px;

  margin: 20px auto;

  width: 720px;

}


legend {

  background-color: purple;

  border-radius: 10px;

  color: white;

  padding: 12px;

}


fieldset div {

  margin: 10px;

}


label {

  display: inline-block;

  text-align: right;

  vertical-align: top;

  width: 200px;

}


.container {

  width: 60%;

  overflow: hidden;

  margin: 100px auto;

}


.box {

  width: 100px;

  height: auto;

  padding: 10px;

}


.box {

  cursor: pointer;

}


.full-image {

  width: 580px;

  height: 580px;

  padding: 10px;

}


.col {

  float: right;

}


.full-image img {

  width: 100%;

  /* height: 100%; */

}


.closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  color: white;

  font-size: 35px;

  cursor: pointer;

}

<title>Image Gallery App</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<fieldset>

  <legend>Your Images</legend>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" onchange="imgUploaded(event, 'thumbnail-one')" name="avatar" required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" onchange="imgUploaded(event, 'thumbnail-two')" name="avatar" required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" onchange="imgUploaded(event, 'thumbnail-three')" name="avatar" required="">

  </div>

</fieldset>


<div class="container">

  <div class="col">

    <div class="box thumbnail-one">

      <img src="https://http.cat/100" alt="Nature" style="width:100%">

    </div>

    <div class="box thumbnail-two">

      <img src="https://http.cat/405" alt="Snow" style="width:100%">

    </div>

    <div class="box thumbnail-three">

      <img src="https://http.cat/504" alt="Mountains" style="width:100%">

    </div>

  </div>

  <div class="col">

    <div class="full-image">

      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

      <img src="https://http.cat/100" id="expandedImg" />

    </div>

  </div>

</div>


查看完整回答
反對 回復 2022-12-22
?
達令說

TA貢獻1821條經驗 獲得超6個贊

  1. 向您添加新attribute data-thumb的輸入并在此處添加相應的縮略圖類，例如data-thumb='thumbnail-one' data-thumb='thumbnail-two'. 你的輸入看起來像<input type="file" id="avatar" name="avatar" data-thumb='one' required="">

  2. 用于let thumb = $(this).data('thumb');獲取內部的縮略圖類值files.change(function(e) {...}。請注意，您也可以使用let thumb = $(this).attr('data-thumb');.

  3. $("." + thumb + " img").attr("src", e.target.result);用作選擇器。

PS正如@AlwaysHelping 在評論中提到的那樣，并且根據建議，您應該始終使用唯一id值。因為如果你使用#avatar它，它總是會返回withfirst中的元素。同樣在形式上它可能會導致問題。DOMid = avatarpostback

$(window).on('load', function() {

  var files = $("input[type=file]");

  files.change(function(e) {

    if (this.files && this.files[0]) {

      let thumb = $(this).data('thumb');

      // let thumb = $(this).attr('data-thumb'); // alternative to above line.

      var reader = new FileReader();

      reader.onload = function(e) {

        $("." + thumb + " img").attr("src", e.target.result);

        $('.full-image img').attr("src", e.target.result);

      }

      reader.readAsDataURL(this.files[0]);

    }

  });

});


$(document).ready(function() {

  $('.box').click(function() {

    $('.full-image').html($(this).html());

    console.log(this);

  });

});

body {

  font-family: 'Poppins', Verdana, Arial, sans-serif;

}


fieldset {

  background-color: lavender;

  border: 10px solid darkblue;

  border-radius: 20px;

  margin: 20px auto;

  width: 720px;

}


legend {

  background-color: purple;

  border-radius: 10px;

  color: white;

  padding: 12px;

}


fieldset div {

  margin: 10px;

}


label {

  display: inline-block;

  text-align: right;

  vertical-align: top;

  width: 200px;

}


.container {

  width: 60%;

  overflow: hidden;

  margin: 100px auto;

}


.box {

  width: 100px;

  height: auto;

  padding: 10px;

}


.box {

  cursor: pointer;

}


.full-image {

  width: 580px;

  height: 580px;

  padding: 10px;

}


.col {

  float: right;

}


.full-image img {

  width: 100%;

  /* height: 100%; */

}


.closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  color: white;

  font-size: 35px;

  cursor: pointer;

}

<title>Image Gallery App</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<fieldset>

  <legend>Your Images</legend>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">

  </div>

  <div>

    <label for="avatar">Upload Your Image:</label>

    <input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">

  </div>

</fieldset>


<div class="container">

  <div class="col">

    <div class="box thumbnail-one">

      <img src="https://http.cat/100" alt="Nature" style="width:100%">

    </div>

    <div class="box thumbnail-two">

      <img src="https://http.cat/405" alt="Snow" style="width:100%">

    </div>

    <div class="box thumbnail-three">

      <img src="https://http.cat/504" alt="Mountains" style="width:100%">

    </div>

  </div>

  <div class="col">

    <div class="full-image">

      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

      <img src="https://http.cat/100" id="expandedImg" />

    </div>

  </div>

</div>


查看完整回答
反對 回復 2022-12-22
  • 2 回答
  • 0 關注
  • 96 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號