我测试了这个脚本,请参见此处。但我无法工作,因为当选择图像时,只显示代码而不显示图像。
<script>
jQuery(document).ready(function(e){
jQuery('#file_input').change(function(e) {
//alert("okokok");
/**/
readFile(this.files[0], function(e) {
//manipulate with result...
jQuery('#output_field').text(e.target.result);
});
});
});
function readFile(file, callback){
var reader = new FileReader();
reader.onload = callback
reader.readAsText(file);
}
</script>
HTML 代码:
> <input type="file" id="file_input" class="foo" /> <div > id="output_field" class="foo"></div>
当选择我想要的文件时,只显示编码文字和数字,不显示图像。我不知道这是如何或为什么会发生?
最佳答案
试试这个代码:
jQuery(document).ready(function(e){
jQuery('#file_input').change(function(e) {
//alert("okokok");
/**/
readFile(this.files[0], function(e)
{
//manipulate with result...
jQuery('#output_field').src(e.target.result);
});
});
});
function readFile(file, callback){
var reader = new FileReader();
reader.onload = callback
reader.readAsDataURL(file);
}
这里假设#output_field
是一个图像,否则您应该将其更改为img
元素。
这篇文章可能会有所帮助:http://www.javascripture.com/FileReader
关于javascript - 显示图像预览直至上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41233415/