设置显示input上传的图片

最新推荐文章于 2024-08-12 16:30:53 发布
最新推荐文章于 2024-08-12 16:30:53 发布
阅读量760 收藏
点赞数
分类专栏： JS 文章标签： javascript html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16494241/article/details/84862097
版权

1、createObjectURL
createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

2、FileReader方法
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

createObjectURL　demo：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>createObjectURL显示上传的图片</title>
<style>
body{ display:flex; line-height:30px;}
.left , .right{ width:50%; padding-left:10px; box-sizing:border-box;}
.left{ min-height:600px; border-right:#f00 dashed 1px;}
input{ display:block; border:#000 solid 1px;}
</style>
</head>

<body>

<div class="left">
	<div><strong>原生JS</strong></div>
    单选
    <input id="oneJs" type="file" accept="image/*" />
    <div id="showOneJs" style="min-height:200px;"></div>
    
    可多选
    <input id="twoJs" type="file" accept="image/*" multiple />
    <div id="showTwoJs"></div>
</div>

<div class="right">
	<div><strong>JQ</strong></div>
    单选
    <input id="oneJq" type="file" accept="image/*" />
    <div id="showOneJq" style="min-height:200px;"></div>
    
    可多选
    <input id="twoJq" type="file" accept="image/*" multiple />
    <div id="showTwoJq"></div>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function getObjectURL(file){
	//console.log(file);
    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;
}


/****************/


//jq 调用方法

$('#oneJq').on('change',function(){
	$('#showOneJq').empty().append('<img style="max-width:200px; max-height:200px;" src="' + getObjectURL(this.files[0]) + '" />');
});

$('#twoJq').on('change',function(){
	var This = this;
	$('#showTwoJq').empty();
	for(var i = 0; i < This.files.length ; i ++){
		$('#showTwoJq').append('<img style="max-width:200px; max-height:200px;" src="' + getObjectURL(This.files[i]) + '" />');
	}
});


/****************/


//原生JS调用方法

//添加图片元素
function createImg(imgEle , file , parEle){
	imgEle.setAttribute('style','max-width:200px;max-height:200px;');
	imgEle.setAttribute('src',getObjectURL(file));
	document.getElementById(parEle).appendChild(imgEle);
}
document.getElementById('oneJs').addEventListener( 'change' , function(e){
	var img = document.createElement('img');
	document.getElementById('showOneJs').innerHTML = '';
	createImg(img , e.target.files[0] , 'showOneJs');	
} , false );

document.getElementById('twoJs').addEventListener( 'change' , function(e){
	var img = [];
	document.getElementById('showTwoJs').innerHTML = '';
	for(var i = 0; i < e.target.files.length ; i ++){
		img[i] = document.createElement('img');
		createImg(img[i] , e.target.files[i] , 'showTwoJs');
	}
} , false );


</script>
</body>
</html>

FileReader　demo：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fileReaderURL显示上传的图片</title>
<style>
body{ display:flex; line-height:30px;}
.left , .right{ width:50%; padding-left:10px; box-sizing:border-box;}
.left{ min-height:600px; border-right:#f00 dashed 1px;}
input{ display:block; border:#000 solid 1px;}
</style>
</head>

<body>

<div class="left">
	<div><strong>原生JS</strong></div>
    单选
    <input id="oneJs" type="file" accept="image/*" />
    <div id="showOneJs" style="min-height:200px;"></div>
    
    可多选
    <input id="twoJs" type="file" accept="image/*" multiple />
    <div id="showTwoJs"></div>
</div>

<div class="right">
	<div><strong>JQ</strong></div>
    单选
    <input id="oneJq" type="file" accept="image/*" />
    <div id="showOneJq" style="min-height:200px;"></div>
    
    可多选
    <input id="twoJq" type="file" accept="image/*" multiple />
    <div id="showTwoJq"></div>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function getfileReaderURL(file,callback){
	//console.log(file);
    var url = null;
	var reader = new FileReader();
	//console.log(reader);
	
	reader.readAsDataURL(file); //将文件以Data URL形式读入页面
	//reader.readAsBinaryString(file); //将文件以二进制形式读入页面
	//reader.readAsText(file); //将文件以文本形式读入页面
	
    reader.onload=function(e){ //文件读取成功完成时触发
        url = reader.result;
		//console.log(url);
		callback(url);
    } 
    reader.onloadend=function(e){ //读取完成触发，无论成功或失败
    } 
}


/****************/


//jq 调用方法

$('#oneJq').on('change',function(){
	getfileReaderURL(this.files[0],function(url){
		$('#showOneJq').empty().append('<img style="max-width:200px; max-height:200px;" src="' + url + '" />');
	});
});

$('#twoJq').on('change',function(){
	var This = this;
	$('#showTwoJq').empty();
	for(var i = 0; i < This.files.length ; i ++){
		getfileReaderURL(This.files[i],function(url){
			$('#showTwoJq').append('<img style="max-width:200px; max-height:200px;" src="' + url + '" />');
		});
	}
});


/****************/


//原生JS调用方法

//添加图片元素
function createImg(imgEle , file , parEle){
	imgEle.setAttribute('style','max-width:200px;max-height:200px;');
	getfileReaderURL(file,function(url){
		imgEle.setAttribute('src',url);
		document.getElementById(parEle).appendChild(imgEle);
	});
}
document.getElementById('oneJs').addEventListener( 'change' , function(e){
	var img = document.createElement('img');
	document.getElementById('showOneJs').innerHTML = '';
	createImg(img , e.target.files[0] , 'showOneJs');	
} , false );

document.getElementById('twoJs').addEventListener( 'change' , function(e){
	var img = [];
	document.getElementById('showTwoJs').innerHTML = '';
	for(var i = 0; i < e.target.files.length ; i ++){
		img[i] = document.createElement('img');
		createImg(img[i] , e.target.files[i] , 'showTwoJs');
	}
} , false );


</script>
</body>
</html>

createObjectURL && FileReader vue.js demo：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fileReaderURL显示上传的图片</title>
<style>
[v-cloak]{ display: none;}
body{ display:flex; line-height: 1.6;}
.left , .right{ width:50%; padding-left:10px; box-sizing:border-box;}
.left{ min-height:600px; border-right:#f00 dashed 1px;}
input{ display:block; border:#000 solid 1px;}
.show_img{ min-height: 200px; padding: 10px 0;}
.show_img img{ display: inline-block; width: 100px; height: 200px; margin: 0 5px; object-fit: contain; border: #eee solid 1px;}
</style>
</head>

<body>

<!-- createObjectURL -->
<div id="app-createobjecturl" v-cloak class="left">
	<div style="color: red;">-----createObjectURL-----</div>
	<div>单选</div>
	<input ref="referenceUpload" @change="sendImg" type="file" accept="image/*" />
	<div class="show_img">
		<img v-if="img" :src="img" >
	</div>
	
	
	<div>可多选</div>
	<input ref="referenceUploadMore" @change="sendImgMore" type="file" accept="image/*" multiple />
	<div class="show_img">
		<img v-if="imgArr.length" v-for="item in imgArr" :src="item" >
	</div>
</div>

<!-- FileReader -->
<div id="app-filereader" v-cloak class="right">
	<div style="color: red;">-----FileReader-----</div>
	<div>单选</div>
	<input ref="referenceUpload" @change="sendImg" type="file" accept="image/*" />
	<div class="show_img">
		<img v-if="img" :src="img" >
	</div>


	<div>可多选</div>
	<input ref="referenceUploadMore" @change="sendImgMore" type="file" accept="image/*" multiple />
	<div class="show_img">
		<img v-if="imgArr.length" v-for="item in imgArr" :src="item" >
	</div>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
// createObjectURL
function getObjectURL(file, callback) {
	//console.log(file);
	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);
	}
	callback(url);
}

var VMC = new Vue({
	el:"#app-createobjecturl",
	data:{
		img:'',
		imgArr:[],
	},
	created() {
		
	},
	mounted() {
		
	},
	watch() {
		
	},
	methods:{
		// 上传图片-单张
		sendImg(e){
			// console.log(e.target.files[0]);
			if(e.target.files[0]){
				if(e.target.files[0].size / 1024 / 1024 > 3){
					this.$refs.referenceUpload.value = null;
					alert('请上传不超过3M的图片');
					return;
				}
				// 获取base64格式图片中...
				getObjectURL(e.target.files[0],(url)=>{
					this.$refs.referenceUpload.value = null;
					this.img = url;
					console.log(this.img);
				});
			}
		},
		
		// 上传图片-多张
		sendImgMore(e){
			// console.log(e.target.files[0]);
			if(e.target.files[0]){
				this.imgArr = [];
				let maxSizeTips = []
				for(var i = 0; i < e.target.files.length ; i ++){
					if(e.target.files[i].size / 1024 / 1024 > 3){
						maxSizeTips.push(i+1);
					}else{
						// 获取base64格式图片中...
						getObjectURL(e.target.files[i],(url)=>{
							this.imgArr.push(url);
							console.log(this.imgArr);
						});
					}
					if(i == e.target.files.length - 1){
						this.showTips(maxSizeTips);
						this.$refs.referenceUploadMore.value = null;
					}
				}
			}
		},
		// 多张图片上传后，文件大了一次提示
		showTips(maxSizeTips){
			if(maxSizeTips.length){
				alert('第' + maxSizeTips.join('、') + '张图片超过3M');
			}
		}
		
	}
})

/****************/

// FileReader
function getfileReaderURL(file,callback){
	//console.log(file);
	var url = null;
	var reader = new FileReader();
	//console.log(reader);

	reader.readAsDataURL(file); //将文件以Data URL形式读入页面
	//reader.readAsBinaryString(file); //将文件以二进制形式读入页面
	//reader.readAsText(file); //将文件以文本形式读入页面

	reader.onload=function(e){ //文件读取成功完成时触发
		url = reader.result;
		//console.log(url);
		callback(url);
	} 
	reader.onloadend=function(e){ //读取完成触发，无论成功或失败
	} 
}

var VMF = new Vue({
	el:"#app-filereader",
	data:{
		img:'',
		imgArr:[],
	},
	created() {
		
	},
	mounted() {
		
	},
	watch() {
		
	},
	methods:{
		// 上传图片-单张
		sendImg(e){
			// console.log(e.target.files[0]);
			if(e.target.files[0]){
				if(e.target.files[0].size / 1024 / 1024 > 3){
					this.$refs.referenceUpload.value = null;
					alert('请上传不超过3M的图片');
					return;
				}
				// 获取base64格式图片中...
				getfileReaderURL(e.target.files[0],(url)=>{
					this.$refs.referenceUpload.value = null;
					this.img = url;
					console.log(this.img);
				});
			}
		},
		
		// 上传图片-多张
		sendImgMore(e){
			// console.log(e.target.files[0]);
			if(e.target.files[0]){
				this.imgArr = [];
				let maxSizeTips = []
				for(var i = 0; i < e.target.files.length ; i ++){
					if(e.target.files[i].size / 1024 / 1024 > 3){
						maxSizeTips.push(i+1);
					}else{
						// 获取base64格式图片中...
						getfileReaderURL(e.target.files[i],(url)=>{
							this.imgArr.push(url);
							console.log(this.imgArr);
						});
					}
					if(i == e.target.files.length - 1){
						this.showTips(maxSizeTips);
						this.$refs.referenceUploadMore.value = null;
					}
				}
			}
		},
		// 多张图片上传后，文件大了一次提示
		showTips(maxSizeTips){
			if(maxSizeTips.length){
				alert('第' + maxSizeTips.join('、') + '张图片超过3M');
			}
		}
		
	}
})

</script>
</body>
</html>

羽筠
关注
专栏目录
前端预览input上传的图片
yudldl的博客
10-16 1万+
在开发的时候，有需要前端预览上传的图片的需求，在完成这个需求后来总结一下 首先我们需要先了解input 和 file类型 Input 标签的file类型，提供了上传文件的功能，通过此类型，可以上传文件到服务器。 input的file类型，在上传文件时，会返回一个File对象，这个对象会存在一个FileList数组里边。之所以存在数组里边，主要是方便实现多文件上传。File对象继承自Blob对...
input上传图片并且实现预览
weixin_45757134的博客
06-11 6775
文章目录前言一、确定思路二、书写代码1.HTML部分2.CSS部分3.JS部分（重点）3.1.点击选择图片按钮，调用input文件框事件的的代码3.2.转换格式3.3.发送图片给后端 前言 在网站中，上传图片这个功能，这个还是挺常见的。比如说：在填写信息中，上传头像中。 提示：以下是本篇文章正文内容，下面案例可供参考 一、确定思路 整个功能，大致可以分为三个步骤。 点击选择图片的按钮，从本地选择一张图片。（选图片） 选择好之后，会进行预览。就好比自己微信要换头像，选择好之后，都会有预览的步骤。（预
input上传图片并显示
weixin_30386713的博客
09-28 64
html： <div id="click"><img> </div><!--照片预览的div --> <div class="choice_pic" id="choice_pic"><input type="file" name="" id="choice_p" onchange="previewFile()">&l...
原生input实现上传upload功能
最新发布
weixin_43993121的博客
08-12 306
这里的例子是，点击按钮，选择多个图片文件后，调用接口上传一个个文件。
js获取 input file 图片立即显示
12-05
js获取input file控件选择的图片 并且立即在img标签显示出来
input 图片上传
qq_51075439的博客
09-28 2798
使用 在vue项目中使用上传图片给后台时，需要对图片文件流和请求头进行一些处理 1、获取上传图片文件流 <template> <div class="upload-file"> <input id="file" @change="handleFileChange" accept="image/*" type="file" :multiple="false"> </div> </template> <script> imp
js input上传文件可input上传图片
10-30
在JavaScript中，`<input ...总结，使用JavaScript的`<input type="file">`结合FileReader、FormData和Fetch API，可以实现图片的选取、预览和上传功能。在实际开发中，还需要注意安全性、用户体验和性能优化等方面。
读取input:file的路径并显示本地图片的方法
09-05
在网页开发中，`<input type="file">` 是一个常见的文件上传控件，它允许用户选择本地的文件，如图片。然而，由于安全原因，现代浏览器并不直接提供所选文件的完整路径，而是返回一个相对安全的文件名或者一个沙箱内...
javascript实现input file上传图片预览效果
11-23
在JavaScript中，实现input file上传图片预览效果是常见的前端功能，...以上就是利用JavaScript实现input file上传图片预览效果的详细过程，这个功能在许多网站的图片上传功能中非常常见，能给用户带来更好的交互体验。
input file上传图片预览
12-30
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
如何用input标签和jquery实现多图片的上传和回显功能
10-18
在网页开发中，图片上传和回显功能是一个常见的需求，特别是在涉及到用户个人资料编辑或商品发布等场景。...在实际项目中，记得根据具体需求添加上传图片到服务器的代码，并处理可能出现的错误和异常。
input文本框里面显示小图片
08-21
input文本框里面显示小图片 ，此处只是小做了一个例子
input上传图片
m0_52518047的博客
01-03 1707
input上传图片
input上传图片并预览
热门推荐
PresByter的博客
10-23 9万+
首先说一下input 大家都知道上传文件，图片是通过input 的file进行上传的。 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file">；在页面的样式是不可以更改的，如下图 但是最为一个投机取巧的前端，一切样式都是可以修改的。 效果图如下 代码： <input type="file" n
input标签上传图片文件，并在网页中显示图片
touto_zc的博客
07-19 4921
通过html5的input标签上传图片，并在网页中显示出来。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </
点击上传图片并显示文件名和图片及获取input file的值和路径
robin_sky的博客
06-28 3万+
原本的input type='file' 样式真的很丑，毫无美感而言，一直想写一个点击图片就显示的界面，现在终于研究出来了。原本的input type='file'样式：改变后的样式：样式代码： &lt;style type="text/css"&gt; .img{opacity:0;} .imgs{border:1px solid #78C3F3;backg...
JQuery实现input上传图片显示缩略图
Yiu的博客
12-08 7358
首先 HTML ：&lt;div&gt; &lt;input type="file" name="file" class="form-control" id="zx_img" style="padding: 0px;" placeholder="&amp;nbsp;上传文件"&gt; &lt;div&gt;
input显示当前选择的图片
weixin_42279465的博客
06-29 617
input显示当前选择的图片
在input框中加入img图片
09-26 5747
其实标题是有错误的 input和其他一类的是不能加入图片的，除非你用定位 1、定位是一种 2、contenteditable=“true” <p contenteditable="true">这是一个可编辑段落。</p> 我找了些资料： https://blog.csdn.net/yifan_lion/article/details/79968367 https://blog.csdn.net/bocongbo/article/details/84061110 然后还有一些demo
Java Servlet 图片上传与显示教程
本示例将详细讲解如何使用Servlet来实现用户从客户端上传图片至服务器指定文件夹，并在另一个页面上显示该图片。 首先，我们关注的是上传图片的前端页面，即`uploadphoto.jsp`。在这个页面中，我们需要创建一个表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值