javascript - 动态创建上传图片框并预览

Question

我正在尝试创建一个可以上传不同图片的页面。

我希望他们看到 1 个框，当他们上传文件时，预览会显示在那里。

在页面加载时，我只想显示一个框，在他选择文件后，我想显示另一个框，他可以在其中上传图片并查看预览。

HTML

<script class="jsbin" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 

<div class="image-upload-wrap">
<input class="file-upload-input" type='file' onchange="readURL(this);" 
 accept="image/*" />
<div class="drag-text">
  <h3>Drag and drop a file or select add Image</h3>
</div>
</div>
<div class="file-upload-content">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
  <button type="button" onclick="removeUpload()" class="remove- 
 image">Remove <span class="image-title">Uploaded Image</span></button>
</div>

  <div class="file-upload">

  <div class="image-upload-wrap">
  <input class="file-upload-input" type='file' onchange="readURL(this);" 
   accept="image/*" />
   <div class="drag-text">
    <h3>Drag and drop a file or select add Image</h3>
  </div>
 </div>
 <div class="file-upload-content">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
  <button type="button" onclick="removeUpload()" class="remove- 
   image">Remove <span class="image-title">Uploaded Image</span></button>
</div>

<div class="image-upload-wrap">
<input class="file-upload-input" type='file' onchange="readURL(this);" 
 accept="image/*" />
<div class="drag-text">
  <h3>Drag and drop a file or select add Image</h3>
 </div>
  </div>
  <div class="file-upload-content">
  <img class="file-upload-image" src="#" alt="your image" />
  <div class="image-title-wrap">
  <button type="button" onclick="removeUpload()" class="remove- 
   image">Remove <span class="image-title">Uploaded Image</span></button>
  </div>
 </div>
</div>

CSS

    body {
  font-family: sans-serif;
  background-color: #eeeeee;
}

.file-upload {
  background-color: #ffffff;
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  background: #1FB264;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #15824B;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: #1AA059;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  margin-top: 20px;
  border: 4px dashed #1FB264;
  position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color: #1FB264;
  border: 4px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: #15824B;
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all .2s ease;
}

JavaScript

function readURL(input) {
  if (input.files && input.files[0]) {

    var reader = new FileReader();

    reader.onload = function(e) {
      $('.image-upload-wrap').hide();

      $('.file-upload-image').attr('src', e.target.result);
      $('.file-upload-content').show();

      $('.image-title').html(input.files[0].name);
    };

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

  } else {
    removeUpload();
  }
}

function removeUpload() {
  $('.file-upload-input').replaceWith($('.file-upload-input').clone());
  $('.file-upload-content').hide();
  $('.image-upload-wrap').show();
}
$('.image-upload-wrap').bind('dragover', function () {
        $('.image-upload-wrap').addClass('image-dropping');
    });
    $('.image-upload-wrap').bind('dragleave', function () {
        $('.image-upload-wrap').removeClass('image-dropping');
});

这是代码笔中的代码:https://codepen.io/anon/pen/wRgBJw

我现在有 3 个框，它们都同时显示。我想在请求中只显示 1 个，然后在用户选择/上传照片后 1 个显示 1 个。但是当我上传文件时，它会在所有 3 个框上显示预览。

Answer 1

这正是类的工作方式..代码将任何内容附加到具有相同类的元素..所以你需要有一个引用来获取 $(this) 输入元素

function readURL(input) {
  var Thisinput = $(input); // <<<< this input
  if (input.files && input.files[0]) {

    var reader = new FileReader();

    reader.onload = function(e) {
      Thisinput.closest('.file-upload').find('.image-upload-wrap').hide(); //<<< get the image-upload-wrap element for this input .. same with the next elements

      Thisinput.closest('.file-upload').find('.file-upload-image').attr('src', e.target.result);
      Thisinput.closest('.file-upload').find('.file-upload-content').show();

      Thisinput.closest('.file-upload').find('.image-title').html(input.files[0].name);
    };

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

  } else {
    removeUpload();
  }
}

Codepen

用 removeUpload() 函数做同样的事情..但是需要考虑一些事情..你需要添加参数，比如 function removeupload(input) 和在 html 中 removeupload(this)

Codepen with both functions updated