Question

我可以在点击图片时打开文件对话框吗？此外，我想在选择文件后显示“选定的文件”。有人可以帮我吗？

注意-我不希望“选择文件”按钮，但我希望“未选择任何文本”

<div class="attachment">
  <label for="file-input">
    <img class="attachmentImage" src="../../../../assets/Notification Panel/Actions icons/attachment.svg"/>
  </label>
  <input type="file"/>
</div>

Answer 1

您可以有一个不可见的输入字段，以使用HTML和jQuery单击图像时触发：

$("input[id='input_image']").click(function() {
    $("input[id='input_file']").click();
});
// jQuery Solution for Showing Uploaded Image
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#input_image')
                .attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" id="input_image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px" />
<!-- onchange="readURL(this);" is for jQuery Solution for Showing Uploaded Image-->
<input type="file" id="input_file" style="display: none" onchange="readURL(this);" />

Answer 2

尝试使用自定义输入文件：

 function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                
                reader.onload = function (e) {
                    $('#profile-img-tag').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#file").change(function(){
            readURL(this);
        });

    <input type="file" class="form-control" id="file" placeholder="Enter Your Password" name="files" value="files" style="display: none;">
      <label class="upload_photo" for="file" style="background-color: red; padding: 20px; border-radius: 50%;"></label>
      <img src="" id="profile-img-tag" width="200px" />

    </div>

使用图像而不是按钮打开文件对话框

2 个答案: