Question

<script>
function preview(input){    
    if(input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e){$('#previewImage').attr('src', e.target.result);}
    reader.readAsDataURL(input.files[0]);

    //1. detect image original width & height
    var imgWidth=$("#previewImage").width();
    var imgHeight=$("#previewImage").height();

    //2.run thumbnail class & get scale down's width and height         
    dimension= new thumbnail(imgWidth,imgHeight);
    var previewWidth=dimension.newWidth;    
    var previewHeight=dimension.newHeight;

    //3.chnage width & height for preview           
    $("#previewImage").width(previewWidth);
    $("#previewImage").height(previewHeight);

    $("#previewImage").show();
</script>


<input type='file' id="uploadImg" onchange="preview(this)" />
<img id="previewImage" />

我有一个输入类型的上传文件，我在上传前使用fileReader进行预览，我创建了一个类来缩小图像的大小以进行预览

用户第一次上传图片时效果很好

但如果用户再次点击上传。第二张图片将使用之前的宽度＆amp;高度，是重启onChange的任何方式所以它不会使用以前的宽度＆amp;高度

Answer 1

在这里：http://jsfiddle.net/L4zhd/5/

这样缩略图总是50像素宽。只需将width="50"更改为您想要的任何内容即可。或者如果您总是希望高度相同，则用高度替换它。

javascript重启onchange事件

1 个答案: