实现图片上传前本地预览功能之二

最新推荐文章于 2018-02-23 17:27:19 发布

Sesshoumaru华

最新推荐文章于 2018-02-23 17:27:19 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript基础文章标签：实现图片上传前本地预览功能

本文链接：https://blog.youkuaiyun.com/qq_38921377/article/details/76290471

JavaScript基础专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Java和jQuery实现的文件上传功能，并通过JavaScript实现了文件上传过程中的实时预览效果，仅支持JPEG、GIF和PNG格式的图片文件。此方案能够提升用户体验并加快页面加载速度。

我这个试用起来比之前那个加载要快

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>demo imgage preview</title>
    
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	
	<script type="text/javascript">

	function preview(file)  
	 {
		 var imgSuffix = file.value.substr(file.value.length-4, 4);//得到图片后缀
		 var imgFileName = file.value.split("\\")[2];//得到图片的名称加后缀
		 imgUploadName = imgFileName;//将该图片的后缀赋给imgUploadName这个全局变量
		 debugger
		if(imgSuffix ==".jpg"  || imgSuffix == ".gif" || imgSuffix == ".png"){
			var prevDiv = $("#showImg");
			 if (file.files && file.files[0])
			 {
				 var reader = new FileReader();
				 reader.onload = function(evt)
				 { 
					//id用于修改的时候赋值
					prevDiv.prop("src",evt.target.result)
				 }
				 reader.readAsDataURL(file.files[0]);
			}
		}else{
			alert("图片的格式不正确");
			file.value = "";
		}
	 }
	</script>

  </head>
  
  <body>
    <div></div><input type="file" name="bankImgU" onchange="preview(this)"/><div><a href="javascript:;"></a>
    <div></div><img id="showImg" height="40px" width="100px"/></div>
  </body>
</html>