Zi 字媒體

HTML5的技術越來越成熟，以往很多很難做到的功能，現在都可以很快速的達成。例如檔案的上傳就是一個例子，透過File API就可以在輕易的取得使用者欲上傳檔案的資訊，也方便實作前端與使用者互動的判斷。 File API中包含了許多JavaScript 物件： File：可以用來存取硬碟中的檔案。 Blob：表示儲存在檔案中的原生資料。 FileList：File物件所成的集合。 FileReader：用來讀取檔案。 前置作業： 在使用File API之前，必須先測試瀏覽器是否支援(目前大部份瀏覽器都有支援) //檢查瀏覽器是否支援File API if (window.File && window.FileReader && window.FileList && window.Blob) { alert("support"); } else { alert('not support.'); } Input File 1.取得檔案資訊 HTML jQuery $('#file_test').change(function(event){ //Filelist Object var filelist = event.target.files; var str = ""; for(var i = 0; i < filelist.length ; i++ ) { var file = filelist[i] str += "name：" + escape(file.name) + "\n" + //檔名 "type：" + file.type + "\n" + //檔案類型 "size：" + file.size + "\n" + //檔案大小 "lastModifiedDate：" + file.lastModifiedDate.toLocaleDateString() + "\n\n\n"; //最後修改日期 } alert(str); }); 2.取得檔案內容(範例為選取圖片後立即顯示) HTML jQuery ('#file_test').change(function(event){ //Filelist Object var filelist = event.target.files; for(var i = 0; i < filelist.length ; i++ ) { var file = filelist[i] //判斷是否為圖片 if (!file.type.match('image.*')) { continue; } //FileReader Object var reader = new FileReader(); //定義執行動作 reader.onload = (function(file){ return function(event){ //event.target.result為檔案的編碼 var str = ''; ('#list').append(str); }; })(file); //利用DataURL的方式讀取圖片 reader.readAsDataURL(file); } }); 3.上傳檔案到伺服器 HTML jQuery ('#file_test').change(function(event){ //Filelist Object var filelist = event.target.files; //建立FormData Object var formData = new window.FormData(); for(var i = 0; i < filelist.length ; i++ ) { var file = filelist[i] //將檔案加進FormData formData.append( 'test_file' + i, file ); } //利用ajax傳送到伺服器 .ajax({ url: 'upload.php', data: formData, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } }); }); Drag、Drop File 1.桌面拖曳上傳介面-取得檔案資訊 HTML Drop files here jQuery //jQuery event預設是沒有dataTransfer，需要手動加進去 jQuery.event.props.push('dataTransfer'); //加入dragover和drop ('#drop').on('dragover', function(event){ //停止開啟檔案及其他動作 event.stopPropagation(); event.preventDefault(); //複製拖移的物件 event.dataTransfer.dropEffect = 'copy'; }); ('#drop').on('drop', function(event){ //停止開啟檔案及其他動作 event.stopPropagation(); event.preventDefault(); //透過dataTransfer取得FileList object. var filelist = event.dataTransfer.files; var str = ""; for(var i = 0; i < filelist.length ; i++ ) { var file = filelist[i] str += "name：" + escape(file.name) + "\n" + "type：" + file.type + "\n" + "size：" + file.size + "\n" + "lastModifiedDate：" + file.lastModifiedDate.toLocaleDateString() + "\n\n\n"; } alert(str); }); 2.桌面拖曳上傳介面-取得檔案內容 jQuery.event.props.push('dataTransfer'); ('#drop').on('dragover', function(event){ //停止開啟檔案及其他動作 event.stopPropagation(); event.preventDefault(); //複製拖移的物件 event.dataTransfer.dropEffect = 'copy'; }); ('#drop').on('drop', function(event){ //停止開啟檔案及其他動作 event.stopPropagation(); event.preventDefault(); //取得原始檔案 var filetmp = event.originalEvent.dataTransfer.files; //複數檔案 for (var i = 0; i < filetmp.length; i++) { var file = filetmp[i]; //取得檔案內容 var reader = new FileReader(); //讀取中執行的function reader.onprogress = function (evt) { //確定evt 是 ProgressEvent. if (evt.lengthComputable) { //計算百分比 var percentLoaded = Math.round((evt.loaded / evt.total) * 100); //注意，percentLoaded不會在onprogress中達到100 if (percentLoaded < 100) { console.log(percentLoaded); } } }; reader.onload = (function(file){ return function(event) { //如果前端有做進度條，onload要手動調成100% //檔案類型 console.log(file.type); //檔案內容 console.log(event.target.result); }; })(file); reader.readAsText(file); } }); Categories: jQueryWebDesign 分類 Android AngularJS Chrome Database MySQL DataStructure Editor Vim Firefox Git Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS Wordpress Search 搜尋：