html jQuery 上传图片显示当前图片

最新推荐文章于 2020-09-25 17:43:07 发布

原创最新推荐文章于 2020-09-25 17:43:07 发布 · 502 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html

jQuery HTML 专栏收录该内容

1 篇文章

订阅专栏

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>