Question

我有一个表单，其中包含在不同列上上传图片的功能。我想在上传之前预览这些图片。我有一个功能，可以在单个上传中执行此任务，如下所示：

 function readURL(input) {

     if (input.files && input.files[0]) {
         var reader = new FileReader();

         reader.onload = function (e) {                 
             $('#profileimagesrc').attr('src', e.target.result);
         }

         reader.readAsDataURL(input.files[0]);
     }
 }
$("#profileimage").change(function() {
     readURL(this);

 });

但由于我有多列：

<div class="form-row">
 <div><span class="form-title">Profile Image</span></div>
  <li class="form-control" style="width:100%;height:100%;">
   <img id="profileimagesrc" src="image/Image-default.jpg" style="width: 160px; height: 160px; margin-left: 11px; margin-bottom: 5px;" />
    <input type="file" name="profileimage" id="profileimage" onchange="readURL(this);">

     </li>
      </div>

<div class="form-row">
 <div><span class="form-title">Book Image</span></div>
  <li class="form-control" style="width:100%;height:100%;">
   <img id="bookimagesrc" src="image/Image-default.jpg" style="width: 160px; height: 160px; margin-left: 11px; margin-bottom: 5px;" />
    <input type="file" name="bookimage" id="bookimage" onchange="readURL(this);">

     </li>
      </div>

我想创建一个通用函数，以便我可以使用该函数一次来预览图像。

这就是我所做的：

 function readURL(input) {

     if (input.files && input.files[0]) {
         var reader = new FileReader();

         reader.onload = function (e) {
             var imagesrc = input.parent().find('img',id());
             $('#imagesrc').attr('src', e.target.result);
         }

         reader.readAsDataURL(input.files[0]);
     }
 }

 $(".image").change(function() {
     var image = this.id;
     readURL(image);

 });


 </script>

此功能运作良好： $（“。image”）。change（function（）{...}

我想我无法为父母选择图片的ID。请指导我如何通过选择图像的ID来选择标签的ID。

Answer 1

这可能是HTML：

 <div class="form-row">
 <div><span class="form-title">Profile Image</span></div>
  <li class="form-control" style="width:100%;height:100%;">
 <img src="image/Image-default.jpg" style="width: 160px; height: 160px;    margin-left: 11px; margin-bottom: 5px;" />
  <input type="file" name="profileimage" onchange="readURL(this);">
</li>
<li class="form-control" style="width:100%;height:100%;">
 <img src="image/Image-default.jpg" style="width: 160px; height: 160px;    margin-left: 11px; margin-bottom: 5px;" />
  <input type="file" name="bookimage" onchange="readURL(this);">
</li>
 </div>

然后是通用函数：

 <script type="text/javascript">

 function readURL(input) {

     if (input.files && input.files[0]) {
         var reader = new FileReader();

         reader.onload = function (e) {
             $(input).siblings().attr('src', e.target.result);
         }

         reader.readAsDataURL(input.files[0]);
     }
 }


 </script>

上传前预览图片的通用功能

1 个答案: