input上传图片

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.file {
				width: 75px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				background-color: green;
				position: relative;
				color: #fff;
			}
			
			.file input {
				width: 75px;
				height: 25px;
				opacity: 0;
				filter: alpha(opacity=0);
				position: absolute;
				left: 0;
				top: 0;
			}
			#dd{
				width: 300px;
				height: 300px;
			}
			#dd img{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<form action="" name="file" class="file">
			上传文件
			<input type="file" id="img" name="img">
		</form>
		<div id="dd"></div>
		<script>
			var file = document.getElementById("img");
			file.onchange = function() { // 文本框内容改变时触发
				var files = this.files; // 获取文件的数量
				for(var i = 0; i < files.length; i++) {
					readers(files[i]);
				}
			}
			
			function readers(fil) {
				console.log(fil);
				var reader = new FileReader(); // 异步读取存储在用户计算机上的文件
				reader.readAsDataURL(fil); // 开始读取指定的Blob对象或File对象中的内容
				reader.onload = function() {
					document.getElementById("dd").innerHTML += "<img src='" + reader.result + "'>"; // 添加图片到指定容器中
					console.log(reader.result);
				};
			}
			
		</script>
	</body>
</html>

input上传图片卡顿的问题可能是由于上传的图片过大或者网络不稳定导致的。以下是两种解决方法: 1. 压缩图片大小:可以使用第三方库或者前端技术来压缩上传的图片,减小图片的大小,从而提高上传速度。例如使用JavaScript的canvas来进行图片压缩: ```javascript function compressImage(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); canvas.toBlob(function(blob) { resolve(blob); }, file.type); }; img.src = event.target.result; }; reader.readAsDataURL(file); }); } // 使用示例 const inputElement = document.getElementById('file-input'); inputElement.addEventListener('change', async function(event) { const file = event.target.files[0]; const compressedFile = await compressImage(file); // 将压缩后的文件上传 }); ``` 2. 使用分片上传:将大文件分成多个小块进行上传,可以提高上传速度并且可以在上传失败时进行断点续传。可以使用第三方库或者后端技术来实现分片上传。例如使用JavaScript的FormData和XMLHttpRequest来实现: ```javascript const inputElement = document.getElementById('file-input'); inputElement.addEventListener('change', function(event) { const file = event.target.files[0]; const chunkSize = 1024 * 1024; // 每个分片的大小,这里设置为1MB const totalChunks = Math.ceil(file.size / chunkSize); // 总分片数 let currentChunk = 0; // 当前上传的分片索引 function uploadChunk() { const start = currentChunk * chunkSize; const end = Math.min(start + chunkSize, file.size); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('chunk', currentChunk); formData.append('totalChunks', totalChunks); const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { currentChunk++; if (currentChunk < totalChunks) { uploadChunk(); } else { // 上传完成 } } else { // 上传失败 } }; xhr.send(formData); } uploadChunk(); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值