Question

我经验不足，请帮助我解决这个问题。我想通过点击它输入字段工作只需图像上传框。提前谢谢

＆＃13;

COPY [".", "/sandbox"]

＆＃13;

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#picker')
        .attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

＆＃13;

img {
  max-width: 180px;
}

input[type=file] {
  padding: 0px;
  position: absolute;
  display: ;
  background: ;
}

.card-1 {
  width: 180px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

＆＃13;

Answer 1

您可以在.click() this.previousElementSibling.click()处onclick处<img>元素<input type="file">元素的下一个元素同时调用file。

input[type=file]上的css input[type="file"]应该在display none处引号括起来。如果不应显示元素，请将input[type="file"]设置为function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#picker') .attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } }元素{/ 1}}。

img {
  max-width: 180px;
}

input[type="file"] {
  padding: 0px;
  position: absolute;
  display: none;
}

.card-1 {
  width: 180px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card card-1">
  <input type='file' onchange="readURL(this);" />
  <img onclick="this.previousElementSibling.click()" id="picker" src="http://placehold.it/180" alt="your image" />
</div>

Poco::Data::BLOB data(std::vector<unsigned char>({ '0', '0', '0', '0', '0', '0', '0', '0', '0', '0' }));

我想使用隐藏输入字段的图像上传框。当我隐藏输入字段时，它无法正常工作..任何建议？

1 个答案: