本文摘要：http://www.liaoxuefeng.com/

在HTML表單中，可以上傳文件的唯一控件就是<input type="file">。

注意：當一個表單包含<input type="file">時，表單的enctype必須指定為multipart/form-data，method必須指定為post，瀏覽器才能正確編碼并以multipart/form-data格式發(fā)送表單的數(shù)據(jù)。

出于安全考慮，瀏覽器只允許用戶點擊<input type="file">來選擇本地文件，用JavaScript對<input type="file">的value賦值是沒有任何效果的。當用戶選擇了上傳某個文件后，JavaScript也無法獲得該文件的真實路徑：

//當設置了Enctype為multipart/form-data 可以傳多格式的，不僅限于圖片
<form id="form1" runat="server" enctype="multipart/form-data" method="post" action="表格提交的去向"> //要在后臺得到數(shù)據(jù)，這里的action需要給個頁面或一般處理程序<input id="File1" type="file" name="File1" /> //如果需要在后臺獲取信息，這邊的標簽必須帶name屬性，后臺的Form["XX"]才會有值<input id="Button1" type="button" value="button" /> //這里的type類型改成Submit才能觸發(fā)表單提交<script src="../js/jquery-1.11.0.min.js"></script><script>'use strict';$("#Button1").click(function () {var filename = document.getElementById("File1").value; //這只是個路徑，而且不是真實的
//對文件內(nèi)類進行過濾if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {alert('Can only upload image file.');return false;}})</script></form>

? ?我們上傳一般只能一個路徑，需要文件信息，我們一般在后臺去做。

?

?

File API ? ? ? ? 可以在前臺就直接獲取文件信息，不用在去后臺獲取

由于JavaScript對用戶上傳的文件操作非常有限，尤其是無法讀取文件內(nèi)容，使得很多需要操作文件的網(wǎng)頁不得不用Flash這樣的第三方插件來實現(xiàn)。

隨著HTML5的普及，新增的File API允許JavaScript讀取文件內(nèi)容，獲得更多的文件信息。

HTML5的File API提供了File和FileReader兩個主要對象，可以獲得文件信息并讀取文件。

關于 FIle和FileReader的了解 參考?https://developer.mozilla.org/en-US/docs/Web/API/File

<input id="File1" type="file" /> <div><img id="im" style="width:100px;height:200px" /></div><div id="info"></div><script src="../js/jquery-1.11.0.min.js"></script><script>'use strict';var fileInput = document.getElementById("File1");var im = document.getElementById("im");var info = document.getElementById("info");//監(jiān)聽change事件fileInput.addEventListener("change", function () {if (!fileInput.value) { //非空非零即為真info.innerHTML = "你沒有選擇文件";return ; //事件里面遇到return就退出了 }
//以下代碼看不懂先去了解File Api里面的File和FileReader對象var file = fileInput.files[0];//單個上傳，只有一個就是0info.innerHTML = '文件：' +file.name +'<br>'+'大小：'+file.size+'<br>'+'修改：' + file.lastModifiedDate;if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {alert('不是有效的圖片文件!');return;}var reader = new FileReader();reader.onload = function (e) { //每次讀取操作完成觸發(fā)次事件
//var data=reader.result; 這樣也可以獲取到var data = e.target.result; //data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)... //console.log(data); 這個輸出來看了一下好多，也看不懂，而且還把網(wǎng)頁卡住了im.src = data;}
//回調(diào) reader.readAsDataURL(file); //用于讀取File內(nèi)容，讀取完成后，會觸發(fā)onload事件 })</script>

結果：

解釋：

?

該readAsDataURL方法用于讀取指定Blob或的內(nèi)容File。讀取操作完成后，readyState變成DONE，loadend被觸發(fā)。此時，該result屬性包含??the data as a?表示文件數(shù)據(jù)的URL作為base64編碼字符串。

上面的代碼演示了如何通過HTML5的File API讀取文件內(nèi)容。以DataURL的形式讀取到的文件是一個字符串，類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...，常用于設置圖像。如果需要服務器端處理，把字符串base64,后面的字符發(fā)送給服務器并用Base64解碼就可以得到原始文件的二進制內(nèi)容。

?

?

轉載于:https://www.cnblogs.com/Sea1ee/p/7131955.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的操作文件 -------JavaScrip的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。