前端 js上传图片在img中直接显示

最新推荐文章于 2022-09-04 23:14:14 发布

zsh1783154183@gmail

最新推荐文章于 2022-09-04 23:14:14 发布

阅读量1.5k

点赞数

分类专栏： img 文章标签： javascript

本文链接：https://blog.csdn.net/m0_49731762/article/details/109576169

版权

img 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>人脸识别系统</title>
    <script src="jquery/jquery-3.3.1.min.js"></script>
</head>
　<body>
	<input id="input-file" class="upload" type="file" value="">

	<br>
	<img src="" alt="">
</body>
<script>
	$(function(){
		$('.upload').change(function(){
			var oFReader = new FileReader();
			console.log(oFReader);
			var file = document.getElementById('input-file').files[0];
			console.log(file);
			oFReader.readAsDataURL(file);
			oFReader.onloadend = function(oFRevent){
				var src = oFRevent.target.result;
				$('img').prop('src',src);
		    }
		})
	})
</script>

</html>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>人脸识别系统</title>
    <script src="jquery/jquery-3.3.1.min.js"></script>
</head>
　<body>
	<input id="input-file" class="upload" type="file" value="">
	<div id = "imgContainer">
	</div>
</body>
<script>
	/*  第二种  显示方式   */
	$(document).on('change', '#input-file', function () {
        console.log(this.files[0]);
        function getObjectURL(file) {
            var url = null;
            if (window.createObjcectURL != undefined) {
                url = window.createOjcectURL(file);
                console.log(url);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
                console.log(url);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
                console.log(url);
            }
            return url;
        }
        var objURL = getObjectURL(this.files[0]);
        alert(objURL);
        $('#imgContainer').html("<img src='" + objURL + "' alt='Alternate Text' width='640px' height='350px' id='target' />");
        cutImg();
    });

</script>

</html>

隐藏文件选择夹直接显示图片

　<body>
	<div id="regcoDiv">
     </div>
</body>


 function chooseFile() {
 		//当 img 点击时  input【type=‘file’】	被单击
        $("#file1").trigger('click');
    }
    
    function imageTo()
    {
        $("#regcoDiv").empty();
        let imageInput = "<h2>点击图片区域上传文件</h2><input style='display: none' type='file' name='file1' id='file1' multiple='multiple' /><br><img src='images/shibie.jpg' οnclick='chooseFile()' id='img0' style='width: 30rem;height: 25rem;'>";
        $("#regcoDiv").append(imageInput);

    }

zsh1783154183@gmail

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端 js上传图片在img中直接显示

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>人脸识别系统</title> <script src="jquery/jquery-3.3.1.min.js"></script></head>　<body> <input id="input-file" class="upload"
复制链接

扫一扫