javascript - 自定义输入类型文件，并使用 jquery 将输入类型替换为所选图像

Question

.image-upload > input
{
    display: none;
}
.upload-icon{
	width: 100px;
	height: 97px;
	border: 2px solid #5642BE;
	border-style: dotted;
	border-radius: 18px;
}
.upload-icon img{
	width: 60px;
	height: 60px;
	margin:19px;
	cursor: pointer;
}

<form>
      <div class="image-upload">
         <label for="file-input">
           <div class="upload-icon">
            <img src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
       <input id="file-input" type="file"/>
      </div>
 </form>

我想仅将图像上传到输入类型文件中，当将选择图像进行上传时，上传图像图标将替换在所选图像中(例如Bellow ScreenShot)。我没有写任何脚本。脚本应该是什么？

Answer 1

您可以尝试为此使用 jQuery。我在下面做了一个例子。

进行预览的代码是这样的:

function readURL(input) {
  var id = $(input).attr("id");

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

    reader.onload = function(e) {
      $('label[for="' + id + '"] .upload-icon').css("border", "none");
      $('label[for="' + id + '"] .icon').hide();
      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
    }

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

$("input[id^='file-input']").change(function() {
  readURL(this);
});

我让它变得更加动态，因此您可以多次使用输入字段，就像您的示例图像中那样。

希望对你有帮助。

function readURL(input) {
  var id = $(input).attr("id");

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

    reader.onload = function(e) {
      $('label[for="' + id + '"] .upload-icon').css("border", "none");
      $('label[for="' + id + '"] .icon').hide();
      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
    }

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

$("input[id^='file-input']").change(function() {
  readURL(this);
});

.image-upload>input {
  display: none;
}

.upload-icon {
  width: 100px;
  height: 97px;
  border: 2px solid #5642BE;
  border-style: dotted;
  border-radius: 18px;
  float: left;
}

.upload-icon .icon {
  width: 60px;
  height: 60px;
  margin: 19px;
  cursor: pointer;
}

.prev {
  display: none;
  width: 95px;
  height: 92px;
  margin: 2px;
  border-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="image-upload">
    <label for="file-input">
           <div class="upload-icon">
            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
    <input id="file-input" type="file" />
  </div>
  <div class="image-upload">
    <label for="file-input2">
           <div class="upload-icon">
            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
    <input id="file-input2" type="file" />
  </div>
  <div class="image-upload">
    <label for="file-input3">
           <div class="upload-icon">
            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
    <input id="file-input3" type="file" />
  </div>
</form>