有關圖片上傳的相關知識input type=file，HTML5的 input:file上傳類型控制

時間 2019-11-08

標籤有關圖片上傳相關知識 input type file html5 html 類型控制欄目 HTML5 简体版

原文原文鏈接

遇到項目，要求作一個影像系統，對於前端開發須要瞭解file的相關屬性，以及如何開發。工欲善其事，必先利器嘛。度娘一陣子搜索，找資料。這年頭，須要的是你解決問題的能力啊！html

參考應用：https://www.cnblogs.com/sunliyuan/p/5737928.html前端

http://blog.okbase.net/jquery2000/archive/1296.html（解釋的也很清楚）jquery

http://blog.csdn.net/qingyjl/article/details/52003567web

文件(File) 接口提供有關文件的信息，並容許網頁中的 JavaScript 訪問其內容。數據庫

File 接口基於Blob，繼承了 blob的功能並將其擴展使其支持用戶系統上的文件。Blob對象表示不可變的相似文件對象的原始數據。Blob表示不必定是JavaScript原生形式的數據。編程

有關於file的官方文檔，能夠參看一個較爲專業的官網：https://developer.mozilla.org/zh-CN/docs/Web/API/File 這個裏面講述的很是詳細，有時間多看看。安全

這裏能夠了解到file接口的屬性。服務器

File.name；返回當前 File 對象所引用文件的名字。函數

File.size；返回文件的大小。學習

File.lastModified；返回當前 File 對象所引用文件最後修改時間，自 1970年1月1日0:00 以來的毫秒數。

File.webkitRelativePath 返回 File 相關的 path 或 URL。

是時候來個例子，

// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (simliar to NodeList)
var files = fileInput.files;

for (var i = 0; i < files.length; i++) {
  var type = files[i].type;
  var name = files[i].name;
  alert("Filename: " + name + " , Type: " + type);

}

files 是一個 FileList 對象(相似於NodeList對象)。input裏type=file裏都有這個files屬性，意爲獲取文件集合。

再上個完整例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
// multiple屬性可讓用戶能選擇多個文件

<input id="myfiles" multiple type="file">

</body>

<script>

var pullfiles=function(){ 
    // 獲取到input元素
    var fileInput = document.querySelector("#myfiles");
    var files = fileInput.files;
    // 獲取到所選文件數量 
    var fl=files.length;
    var i=0;

    while ( i < fl) {
        var file = files[i];
        alert(file.name);
        i++;
    }    
}

// 設置change事件處理函數
document.querySelector("#myfiles").onchange=pullfiles;

</script>

</html>

好了，到這裏咱們來說一下上傳圖片，將圖片顯示出來放到頁面的方法。HTML5讀取input[type=file]中的圖片

參考資料：《HTML5學習之FileReader接口》——http://blog.csdn.net/zk437092645/article/details/8745647

來個demo

<form id="imgForm">  
    <input type="file" class="addBorder">  
    <br/>  
    <button type="button" onclick="loadImg()">獲取圖片</button>  
</form>  
  
<div class="addBorder" id="imgDiv">  
    <img id="imgContent">  
</div>

function loadImg(){  
    //獲取文件  
    var file = $("#imgForm").find("input")[0].files[0];  
  
    //建立讀取文件的對象  
    var reader = new FileReader();  
  
    //建立文件讀取相關的變量  
    var imgFile;  
  
    //爲文件讀取成功設置事件  
    reader.onload=function(e) {  
        alert('文件讀取完成');  
        imgFile = e.target.result; //獲取當前文件的內容
        console.log(imgFile);  
        $("#imgContent").attr('src', imgFile);  
    };  
  
    //正式讀取文件  
    reader.readAsDataURL(file);  
}

這裏要注意 reader.onload是最後執行的，在正式讀取文件以後。

咱們建立了一個FileReader對象，命名爲reader。還聲明瞭一個imgFile變量，這個變量主要用於存儲讀取文件以後所生成的對應文件的base64碼。

以後這段reader.onload=function(e){}是爲讀取文件綁定一個onload事件，相似於咱們給HTML標籤綁定onclick事件，當特定條件達到時，就調用該方法。

最後的，也是最重要的，就是開始讀取文件了。用reader.readAsDataURL(file)，根據你們編程經驗也都能看出，就是調用FileReader類中的readAsDataURL方法，並把以前獲取的file對象傳進去。若是讀取成功，則調用reader.onload事件。

這裏，我還把讀取結果輸入到了控制檯中，以下圖控制檯輸出的base64碼（部分）爲：

光是一個圖片就有這麼多數據，具體我沒研究過，不過我知道的就是圖片越大，數據量也就越大。可是全部圖片前一段都是相似的。如上圖紅色標註部分，都是「data:image/jpeg;base64,」，以後就是圖片的正文內容。這個正文內容有什麼用呢？咱們能夠把這些數據用base64編碼格式寫入對應圖片格式的文件中，你會發現，圖像出來了。一半我上傳圖片的方法就是獲取圖片的base64碼，而後傳給服務器，服務器再對應地生成一個後綴名同樣的文件，並用base64編碼寫入這些數據，服務器端就已經生成了相同的圖片，而後把圖片地址保存到數據庫中。（雖說能夠直接把這些數據存入數據庫中，不過你能夠想象一下，數據庫中一個字段存這麼多數據會是多麼壯觀的事情）。

另外：

reader.readAsDataURL(file);//轉化爲base64格式。
還有的是轉化爲blob對象的，能夠參看網站 https://www.cnblogs.com/saysmy/p/5626337.html

<input type="file" name="2" class="file" accept="image/*"  capture="camera" id="file39"  />

var file = document.getElementById(idFile);

var fileList = file.files; //獲取的圖片文件

var imgUrl = window.URL.createObjectURL(fileList[i]);能夠參考網站：http://blog.csdn.net/fd214333890/article/details/71250488

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。