自定义输入类型文件，并使用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>

我只想上传具有输入类型文件的图像，当选择要上传的图像时，上传图像图标将在选定图像内替换（如下面的截图）。我没有写任何脚本。脚本应该是什么？

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

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