HTML 5 檔案上傳

阿新 • • 發佈：2018-12-23

function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; alert(document.getElementById('fileToUpload').files[1]); if(file) { var fileSize = 0; if(file.size > 1024 * 1024) fileSize = (Math

.round(file.size * 100 /(1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name; document.getElementById('fileSize'

).innerHTML = 'Size: ' + fileSize; document.getElementById('fileType').innerHTML = 'Type: ' + file.type; if(file.type.indexOf('image') != -1) { // 非常簡單的交驗 var s = document.getElementById('fileimg'); s.innerHTML = ''

; var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; // 顯示圖片的地方 s.appendChild(img); }; reader.readAsDataURL(file); } } } function uploadFile() { var fd = new FormData(); fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "${urlPath}/upload/parserUploadFile2"); xhr.send(fd); } function uploadProgress(evt) { if(evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert(evt.target); alert(evt.target.responseText); } function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); }

HTML 5 檔案上傳

HTML 5 檔案上傳

DVWA學習日記-5 檔案上傳

記錄Tomcat8.5檔案上傳，檔案許可權無法訪問

Laravel5.5 檔案上傳

Laravel 5.5 簡單上傳檔案功能

【程式碼審計】CLTPHP_v5.5.3 前臺任意檔案上傳漏洞分析

【springboot】5、SpingBoot檔案上傳、多檔案上傳、檔案下載(斷點續傳)

Struts2（5）攔截器和檔案上傳

最簡單的html檔案上傳示例

html檔案上傳控制元件file自定義樣式

關於前端html圖片和檔案上傳和後臺接收方法

怎麼簡便地去掉html中難看的檔案上傳按鈕並實現圖片預覽功能？

layui.js實現多檔案上傳前端html寫法總結

centos6.5 ftp檔案上傳遇到的問題彙總

循序漸進學.Net Core Web Api開發系列【5】：檔案上傳

考慮 PHP 5.0~5.6 各版本相容性的 cURL 檔案上傳

spring boot 學習筆記（5）檔案上傳

Struts2最新版(2.5.12)快速入門(五) struts2之檔案上傳

PHP版本高於5.5時，curl檔案上傳必須使用CurlFile物件

關於Html動態新增上傳檔案控制元件inputFile（附件）及清除已選擇的檔案的幾個方法

HTML 5 檔案上傳

相關推薦