如果上一个元素为空，则隐藏下一个元素

您必须在此处进行3次更改。

1. 隐藏所有文件上传div，第一个除外。

   .image-upload-wrap ~ .image-upload-wrap { display: none; }

2. 当文件上载完成时，显示下一个文件上载div。（readURL方法）

   $(input).parent().nextAll(".image-upload-wrap:first").show();

3. 删除附件时，隐藏以下所有文件上传div。（removeUpload方法）

   $parent.nextAll(".image-upload-wrap").hide();

   隐藏以上文件上传div.（在某些情况下）

   $parent.prevAll(".image-upload-wrap").hide();

FIDDLE演示

堆栈示例：

   function readURL(input) {
     if (input.files && input.files[0]) {
       var reader = new FileReader();
       reader.onload = function(e) {
         var $parent = $(input).parent(),
           $nextEl = $parent.next();
         $parent.hide();
         $nextEl.find('.file-upload-image').attr('src', e.target.result);
         $nextEl.show();
         $nextEl.find('.image-title').html(input.files[0].name);
       };
       reader.readAsDataURL(input.files[0]);
       $(input).parent().nextAll(".image-upload-wrap:first").show();
     } else {
       removeUpload();
     }
   }
   function removeUpload(button) {
     var $parent = $(button).parent().parent();
     $parent.prevAll(".image-upload-wrap").hide();
     $parent.hide();
     $parent.prev().show();
     $parent.nextAll(".image-upload-wrap").hide();
   }
   $('.image-upload-wrap').bind('dragover', function() {
     $('.image-upload-wrap').addClass('image-dropping');
   });
   $('.image-upload-wrap').bind('dragleave', function() {
     $('.image-upload-wrap').removeClass('image-dropping');
   });

    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;
    }
    .image-upload-wrap ~ .image-upload-wrap {
      display: none;
    }
    .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 #D2D2D2;
      position: relative;
    }
    .image-dropping,
    .image-upload-wrap:hover {
      background-color: #1FB264;
      border: 4px dashed #D2D2D2;
    }
    .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;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="image-upload-wrap" id="1">
  <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(this)" class="remove-image">Remove
      <span class="image-title">Uploaded Image</span>
    </button>
  </div>
</div>
<div class="image-upload-wrap" id="2">
  <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(this)" class="remove-image">Remove
      <span class="image-title">Uploaded Image</span>
    </button>
  </div>
</div>
<div class="image-upload-wrap" id="3">
  <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(this)" class="remove-image">Remove
      <span class="image-title">Uploaded Image</span>
    </button>
  </div>
</div>
<div class="image-upload-wrap" id="4">
  <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(this)" class="remove-image">Remove
      <span class="image-title">Uploaded Image</span>
    </button>
  </div>
</div>