gpt4 book ai didi

javascript - 如何克隆输入类型文件内容?

转载 作者:行者123 更新时间:2023-12-03 01:30:00 28 4
gpt4 key购买 nike

我有这个input类型的file,当用户上传照片(而不是提交)时,它会克隆这张照片并将其附加到div

<input type="file" class="upload"></input>
<button class="submit"></button
<div class="append-here" style="width:500px, height: 500px; background:red;></div>


<script>
var y = $(".append-here")
$(".upload").val().clone(true, true).appendTo(y);
</script>

最佳答案

在您的输入更改中使用 FileReader对象并读取您的输入文件属性:

$('.submit').on('click', function() {
$(this).hide();
var preview = $('img');
preview.show();
var file = $('input[type=file]').prop('files')[0];
var reader = new FileReader();
reader.addEventListener("load", function() {
preview.attr('src', reader.result);
}, false);
if (file) {
reader.readAsDataURL(file);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="upload"/>
<img src="" height="200" alt="Image preview..." style="display:none;"/>
<button class="submit">Submit</button>

关于javascript - 如何克隆输入类型文件内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51344601/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com