这是我制作的一个示例,请根据您的需要进行调整:
在这里演示
我添加了一个按钮删除上传的文件,如果您不喜欢显示/隐藏效果只需删除slow
,图像仅在上传时显示:
$('#blah').hide();
$('#remove').hide();
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(){
if( $('#imgInp').val()!=""){
$('#remove').show();
$('#blah').show('slow');
}
else{ $('#remove').hide();$('#blah').hide('slow');}
readURL(this);
});
$('#remove').click(function(){
$('#imgInp').val('');
$(this).hide();
$('#blah').hide('slow');
$('#blah').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png');
});
HTML 代码:
<form id="form1">
<input type='file' id="imgInp" name='image'/>
<img id="blah" src="#" alt="your image" />
</form>