Question

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

我希望他们看到1个框，当他们上传文件时，预览将显示在其中。

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

HTML

test <- data %>% filter(!ID %in% train%ID)

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

CSS

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

JavaScript

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

这是一个代码笔中的代码：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()函数做同样的事情..但是要考虑一些问题..您需要在HTML function removeupload(input)和HTML removeupload(this)

中添加参数

Codepen with both functions updated

动态创建上传图像框和预览

1 个答案: