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

最新推荐文章于 2022-05-04 20:17:49 发布

Sesshoumaru华

最新推荐文章于 2022-05-04 20:17:49 发布

阅读量488

点赞数

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

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<%@ 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>
    
	<style type="text/css">
		#pic{
				width:100px;
				height:100px;
				border-radius:50%;
				margin:20px auto;
				cursor: pointer;
				}
	</style>

	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
			$("#pic").click(function () {
				debugger;
				$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
			
				$("#upload").on("change", function() {
					var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
						if (objUrl) {
							$("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
					}
				});
			});
	});

	//建立一個可存取到該file的url
	function getObjectURL(file) {
		debugger;
		var url = null;
		if (window.createObjectURL != undefined) { // basic
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	}
</script>
  </head>
  
  <body>
    <img id="pic" src="" >
	<input id="upload" name="file" accept="image/*" type="file" style="display:none"/>
  </body>
</html>