我将这个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>
答案 0 :(得分:1)
在输入更改时,使用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>