公告版位
需要找什麼嗎? 左邊分類或許可以幫助你...

預覽:

localhost8084test.htmlid=1 - Google Chrome  

說明:伺服器必須要做可以接收多檔案機制

<!DOCTYPE html>
<html>
<script type="text/javascript" src="test.js" ></script>

ID : <input type="text" id="id" name="id" value="1" />
<input multiple="multiple" type="file" name="file" id="file" style="display:none" onchange="fileSelected();" accept="video/mp4,video/avi,video/3gpp,video/x-matroska,video/ogg,image/jpeg,image/png,image/bmp,image/gif,image/tiff"/>
<button onclick="open_file_option();"><b>上傳檔案</b></button>
<label id="progressNumber"> 0 % </label>

</html>




/*
*          test.js
*/

function open_file_option() {
document.getElementById("file").click();
}

function fileSelected() {
if (checkFilePass()) {
uploadFile();
}
}

function checkFilePass() {
var files = document.getElementById('file').files;

for (var i = 0; i < files.length; i++) {
if (files[i].type === 'image/jpeg'
|| files[i].type === 'image/png'
|| files[i].type === 'image/bmp'
|| files[i].type === 'image/gif'
|| files[i].type === 'image/tiff') {
if (files[i].size > 10 * 1024 * 1024) {
alert("單一圖片不可以超過 10 MB:" + files[i].name);
return false;
}
} else if (files[i].type === 'video/mp4'
|| files[i].type === 'video/avi'
|| files[i].type === 'video/3gpp'
|| files[i].type === 'video/x-matroska' // *.mkv
|| files[i].type === 'audio/ogg') {
if (files[i].size > 100 * 1024 * 1024) {
alert("單一影片不可以超過 100 MB:" + files[i].name);
return false;
}
} else {
alert(" 不支持格式:" + files[i].name);
return false;
}
}
return true;
}

function uploadFile() {
try {
var fd = new FormData();
var files = document.getElementById('file').files;
for(var i = 0; i < files.length; i++) fd.append("file", files[i]);
fd.append("id", document.getElementById('id').value);

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', 'UploadFile');
xhr.send(fd);
} catch (e) {
alert('My Error : ' + e);
}
}

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) {
alert('伺服器回傳的訊息:' + evt.target.responseText);
}

function uploadFailed(evt) {
alert('發生錯誤');
}

function uploadCanceled(evt) {
alert('取消上傳');
}

 

創作者介紹
創作者 黃彥霖 的頭像
黃彥霖

彥霖 實驗筆記

黃彥霖 發表在 痞客邦 留言(1) 人氣()


留言列表 (1)

發表留言
  • 阿福
  • 請問有原始碼可以Download嗎