html jQuery 上传图片显示当前图片
效果图
选择文件之后
<div>
<td>
<input type="file" style="padding-top: 7.5px;" name="logo" id="file_upload" value="" accept="image/bmp,image/png,image/jpeg,image/jpg"/>
</td>
<td style="position: relative;">
<img width="100" id="preview" style="position: absolute;top: -30px;left: 20px;" src="../../img/logo/<?php echo $logo; ?>" />
</td>
</div>
<script>
$("#file_upload").change(function() {
var $file=$(this);
var fileObj=$file[0];
var windowURL=window.URL||window.webkitURL;
var dataURL;
var $img=$("#preview");
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL=windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
$img.height(100);
}else{
dataURL=$file.val();
$("#preview").height(0);
var imgObj = document.getElementById("preview");
imgObj.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
});
</script>