干货:文件上传带预览JS代码

切版常年致力于web前端外包公司,有3多,项目特别多,踩坑特别多,干货特别多,2018春节来前,奉献一个干货,就是上传文件带预览功能,网上插件很多,但是要不就是不太成熟,要不就是太过复杂,学习成本太高,最后索性研究了一下,用了最原始的JS代码实现,用到自带API接口FileReader,代码不超过10行。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
<input TYPE="file" class="file" name="imgfile" ID="imgfile" placeholder="请选择文件">
<img src="" ID="showImg" >
 
<script src="jquery-1.7.2.js" TYPE="text/javascript"></script>
<script>
 
$(FUNCTION(){
	$('#imgfile').change(FUNCTION(){
 
	        $('#loading').show();
 
		var file = this.files[0];
 
		 //限定上传文件的类型,判断是否是图片类型
	     IF (!/image\/\w+/.test(file.TYPE)) {
	         alert("只能选择图片");
	         RETURN false;
	    }
 
		var reader = new FileReader();
	     reader.readAsDataURL(file);
	     reader.onloadstart =FUNCTION(){
 
	     }
	     reader.onloadend = FUNCTION (e) {
	       base64Code=this.result;
	        //把得到的base64赋值到img标签显示
 
	       setTimeout(FUNCTION(){
 
	        $('#loading').fadeOut();
	       	$("#showImg").attr("src",base64Code);
	       },2000)
	     }
	})
})
 
</script>
 
</body>
</html>
切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号