admin 管理员组

文章数量: 1087678

前端实现上传图片并显示

前端实现上传图片并显示

1.新建.js文件：

$("#file0").change(function(){var objUrl = getObjectURL(this.files[0]) ;//获取文件信息console.log("objUrl = "+objUrl);if (objUrl) {$("#img0").attr("src", objUrl);}
}) ;
function getObjectURL(file) {var url = null;if (window.createObjectURL!=undefined) {url = window.createObjectURL(file) ;} else if (window.URL!=undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file) ;} else if (window.webkitURL!=undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file) ;}return url ;}

2.新建.html文件

<!DOCTYPE html>
<html>
<head>
<title>上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src=".2.4/jquery.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0">
<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" style="width: 20rem;height: 15rem;">
</form>
<script src="assets/js/test1.js"></script>  注意填写自己的.js文件路径
</body>
</html>```

本文标签： 前端实现上传图片并显示

版权声明：本文标题：前端实现上传图片并显示 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700276433a376008.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。