[英]preview an image before uploading using FileReader, rotates the image
我在上传之前看过很多关于观看图片的帖子。 一篇文章有一个非常容易使用FileReader实现的方法:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#image_input").change(function(){
readURL(this);
});
但问题是图像是旋转加载的! 那么我缺少一个遗失的财产吗? 或者FileReader还不够成熟,无法理解图像的布局。 不知道!
也许我应该使用不同的方法! 关于这个问题的任何想法将不胜感激。
谢谢
我知道它很晚才回答这个问题,但这是一个答案
HTML代码
<form method="POST" enctype="multipart/form-data">
<input type="file" id="file">
<div id="preview"></div>
<br>
<a href="#" id="counter"><- counter</a>
<select id="degree">
<option>90</option>
<option>45</option>
</select>
<a href="#" id="clockwise">clockwise -></a>
<hr>
<button type="submit">save image</button>
</form>
Javascript代码
$('a').click(function(){
var a = $('img').getRotateAngle();
var d = Math.abs($('#degree').val());
if($(this).attr('id') == 'counter'){
//d = -Math.abs(+a - +d);
d = a - d;
}
else{d = +a + +d;}
$('img').rotate({animateTo:d});
});
/* image preview */
$('#file').change(function(){
var oFReader = new FileReader();
oFReader.readAsDataURL(this.files[0]);
console.log(this.files[0]);
oFReader.onload = function (oFREvent) {
$('#preview').html('<img src="'+oFREvent.target.result+'">');
};
});
CSS
#preview img {
max-height: 300px;
max-width: 300px;
}
这不是我的代码,在搜索相同问题时在给定的小提琴上找到它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.