Javascript 动态创建上载图像框和预览

我试图创建一个网页，我可以上传不同的图像

我希望他们看到一个框，当他们上传一个文件预览将显示在那里

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

HTML

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');
});

以下是代码笔中的代码：

---

我现在有3个同时显示的盒子。我想在乞讨中只显示1个，然后在用户选择/上传照片后逐个显示1个。但当我上传一个文件时，它会在所有3个框上显示预览。

这正是类的工作方式。。代码将任何内容附加到具有相同类的元素。。因此，您需要有一个引用来获取

$（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();
  }
}

函数readURL（输入）{
VaR这个输入= $（输入）；//这相当好！我做了同样的事情为ReaveUpPultAd（），但没有运气…我更新了CODEPNE。很高兴听到@ JROVER……你仍然有一点点工作与你的代码> ReaveUpPultAd（）/<代码>函数……并且需要考虑的东西…你需要添加参数如<代码>函数RevVoVoopad（输入）

和html中的removeupload（this）。祝您愉快：-）我在html中添加了removeupload（input）和removeupload（this），但由于某些原因仍然无法使用。我尝试了一些其他组合。很抱歉打扰您。@JRowzer只需添加行

var Thisinput=$（input）是的，我忘了那条线了……现在它工作正常了。谢谢！
  <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>

    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;
}

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');
});

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();
  }
}