upload-file-by-XMLHttpRequest

function send_msg(){
    var msg = document.getElementById("msg").value;
    var telecom = document.getElementById("telecom").value;
    var type = document.getElementById("type").value;
    var file_name  = document.getElementById('server_file_name').value;
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST','sms_send.php',true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.onload = function(e){
        if (xhr.status == 200) {
            alert(this.response);
        } else {
            alert("派送失敗");
        }
    };
    xhr.send("msg="+msg+"&telecom="+telecom+"&type="+type+"&file_name="+file_name);
}
    
function upload() {
    var fileInput  = document.getElementById("file");
    
    if (fileInput.files.length === 0) {
        alert("請選擇上傳檔案");
        return;
    }        
    
    if(fileInput.files[0].type !== "text/plain") {
        alert("需為文字檔");
        return;
    }
    
    var progressBar = document.querySelector('progress');
    var file_upload = new FormData();
    
    file_upload.append('file', fileInput.files[0]);
    var xhr = new XMLHttpRequest();

    xhr.onload = function(e) {        
        if (xhr.status == 200) {
            alert("上傳成功");
            fileInput.value = "";            
            document.getElementById('server_file_name').value = this.response;
        } else {
            alert("上傳失敗");
        }
    };
    xhr.onerror = function() {
        alert("無法連結至網站伺服器");
    };
    
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            progressBar.value = (e.loaded / e.total) * 100;
            progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
        }
    };
    
    xhr.open('POST', 'upload.php', true);
    xhr.send(file_upload);
}