我使用拖放上传图像,但如何在保存之前预览图像?
var obj = $('.drop');
obj.on('drop', function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border',"2px dotted #bdc3c7");
var files = e.originalEvent.dataTransfer.files;
var file = files[0];
});
我一直在四处寻找,发现了FileReader
,但我不知道如何实现
最佳答案
请尝试
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<br>
<img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
</form>
还有你的 JS 部分:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
希望对您有帮助。请看一下这个fiddle
关于javascript - 保存前预览图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37783427/