input file單檔案上傳和FileReader物件的基本使用

阿新 • • 發佈：2019-01-21

多說無益，擼出的程式碼才是鐵的事實。。。

建議：可以先看程式碼再看步驟也挺不錯。。。

第一步：在上傳框change的時候，獲取自帶的files物件，一般獲取到的為files[0],如下面程式碼

oFlieImg.onchange = function(e){
		var _self = e.currentTarget;
		var oSelfFile = _self.files[0];	//獲取檔案
		console.log(oSelfFile)
}

第二步：例項化FileReader，一般來說在input元素的相關事件（例如onchange）發生的時候，開始例項化一個FileReader，程式碼如下

var oReader = new FileReader();    // 例項化FileReader物件

第三步：使用FileReader.readAsDataURL(file)讀取檔案內容，在FileReader物件被例項化之後讀取獲取到的檔案資訊。程式碼入下

oReader.readAsDataURL(oSelfFile);	// 讀取檔案

第四步：在FileReader物件載入的時候獲取到它自己的result值，這裡說明一下：獲取result值有多種，第一種直接是this.result、第二種是e.currentTarget.result、第三種是e.target.result，其實列印其e的時候你會發現，它所有的物件都在，逐個呼叫即可。這裡因為是基礎應用，所以就不多做介紹了。這裡獲取到的base64，可以直接作為圖片的URL使用，也可以直接在跟後端互動的時候傳給後端。第四步的程式碼入下

oReader.onload = function(ev){
		// 獲取到FileReader讀取檔案的base64
		oImgBase64 = ev.currentTarget.result;
}

第五步：其實上面也講了，就是將獲取到的base64直接作為圖片的URL使用，也可以直接在跟後端互動的時候傳給後端。

最後小狼子把這個簡單的案例的程式碼發給大家，因為沒做封裝，所以程式碼有點小亂，希望見諒

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="小狼子< 
[email protected]>">
<title>單檔案上傳</title>
<style type="text/css">
	.fileimg-ct{
		width: 200px;
		height: 200px;
		background-color: #c1cbda;
		position: relative;
		border: 1px #c1cbda solid;
	}
	.fileimg-ct > img{
		border: none;
		background: none;
		width: 160px;
		height: 160px;
		position: absolute;
		left: 20px;
		top: 20px;
		display: none;
		z-index: 3;
	}
	.fileimg-ct > button{
		width: 200px;
		height: 200px;
		background: #fff;
		color: #333;
		margin: 0;
		padding: 0;
		border: none;
		outline: none;
		cursor: pointer
	}
	.fileimg-ct > span{
		font-size: 14px;
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 3;
		cursor: pointer;
		display: none;
	}
	.fileimg-ct > span:hover{
		color: red;
	}
	.fileimg-ct > input{
		width: 200px;
		height: 200px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		opacity: 0;
	}
</style>
</head>
<body>
<div class="fileimg-ct">
	<button>請上傳圖片</button>
	<span id="clearImg">x</span>
	<input type="file" name="file" id="fileImg" accept=".gif,.jpg,.jpeg,.png">
	<img src="img/m_01.jpeg" id="showImg" width="200" height="200">
</div>
<script type="text/javascript">
	var oFlieImg = document.querySelector('#fileImg');
	var oShowImg = document.querySelector('#showImg');
	var oClearImg = document.querySelector('#clearImg');
	var oImgBase64 = '';
	imgIsEmpty();
	oFlieImg.onchange = function(e){
		var _self = e.currentTarget;
		var oSelfFile = _self.files[0];	//獲取檔案
		console.log(oSelfFile)
		// console.log(oSelfFile.name.lastIndexOf('.'));
		// 如果要限制檔案型別的話這裡可以判定oSelfFile.name‘.’最後一次出現的位置之後的單詞是否為想要的型別
		// 或者判斷oSelfFile.type
		// 判斷檔案大小為size單位為位元組
		var oReader = new FileReader();
		oReader.readAsDataURL(oSelfFile);	// 讀取檔案
		// 載入檔案
		oReader.onload = function(ev){
			// 獲取到FileReader讀取檔案的base64
			oImgBase64 = ev.currentTarget.result;
			// console.log(oImgBase64)
			if (oShowImg) {
				oShowImg.setAttribute('src', oImgBase64);
				imgIsEmpty();
			}
		}
	}
	oClearImg.onclick = function(){
		oShowImg.setAttribute('src', '');
		imgIsEmpty();
	}
	function imgIsEmpty(){
		var oShowSrc = oShowImg.getAttribute('src');
		if (oShowSrc==='') {
			oClearImg.style.display = 'none';
			oShowImg.style.display = 'none';
		}else {
			oShowImg.style.display = 'block';
			oClearImg.style.display = 'block';
		}
	}
	// 沒有做封裝見諒
</script>
</body>
</html>

好吧，我承認幾乎沒人會看到這裡，但是還是bb一句，如果想要更多的檔案上傳的操作可以在下方留言哦。。。

input file單檔案上傳和FileReader物件的基本使用

input file單檔案上傳和FileReader物件的基本使用

input file 實現拍照上傳和選擇相簿等檔案

ThinkPHP遇到的問題:單檔案上傳和多檔案上傳

input file選擇檔案上傳後清空選擇框檔案資訊兩種解決方案

SSH註解實現單檔案上傳和下載

ajaxfileupload單檔案上傳相容IE8及 input type=file樣式修改

input file 文件上傳,js控制上傳文件的大小和格式

Struts2的檔案上傳和下載（1）單檔案上傳

input file多圖上傳限制大小和張數

表單中檔案上傳和下載

input File實現同時上傳多個檔案

IOS學習網路 AFNetworking單檔案上傳取消單個佇列和全部佇列的方法(取消網路請求)

input file 重復上傳同一張圖片失效的解決辦法

修改input file 文件上傳的樣式

javaExcel檔案上傳和下載

SpringBoot多檔案上傳和檔案下載

xshell 檔案上傳和下載

SpringMVC檔案上傳和下載

單檔案上傳

#使用springboot進行檔案上傳和下載

input file單檔案上傳和FileReader物件的基本使用

相關推薦