開發環境：WIN10+IE11，瀏覽器請使用IE10或以上版本

開發技術框架MVC4+JQuery Easyui+knockoutjs

效果為彈出小窗體，如下圖

1.前端cshtml檔案程式碼(只包含檔案上傳窗體)。注意form設定，必須使用form-data傳遞檔案。注意按鈕事件我這裡是封裝的data-bind=“click:closeImportClick”，不要照抄

html5可直接在input標籤file控制元件中設定accept屬性限制上傳檔案型別，設定multiple屬性可同時上傳多個檔案

2.ViewModel中js程式碼:定義上傳事件。注意使用ajax請求時，需要設定contentType: false，否則chrome和firefox不相容

//匯入事件，顯示匯入彈出視窗
this.importClick = function ()
{
    $('#import-excel-template').window('open')

document.getElementById(“importFileForm”).style.display = “block”;
}
//關閉匯入彈出視窗
this.closeImportClick = function () {
document.getElementById(‘fileImport’).value = null;
document.getElementById(‘fileName’).innerHTML = “”;
document.getElementById(‘uploadInfo’).innerHTML = “”;
$(’#import-excel-template’).window(‘close’)
}

//匯入檔案
this.importFileClick = function ()
{
    //獲取上傳檔案控制元件內容
    var file = document.getElementById('fileImport').files[0];
    //判斷控制元件中是否存在檔案內容，如果不存在，彈出提示資訊，阻止進一步操作
    if (file == null) { alert('錯誤，請選擇檔案'); return; }
    //獲取檔名稱
    var fileName = file.name;
    //獲取檔案型別名稱
    var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
    //這裡限定上傳檔案檔案型別必須為.xlsx，如果檔案型別不符，提示錯誤資訊
    if (file_typename == '.xlsx')
    {
        //計算檔案大小
        var fileSize = 0;
        //如果檔案大小大於1024位元組X1024位元組，則顯示檔案大小單位為MB，否則為KB
        if (file.size > 1024 * 1024) {
 

fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;

if (fileSize > 10) {
alert(‘錯誤，檔案超過10MB，禁止上傳！’); return;
}
　　　　　　　　　fileSize = fileSize.toString() + ‘MB’;
}
else {
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB’;
}
//將檔名和檔案大小顯示在前端label文字中
document.getElementById(‘fileName’).innerHTML = “檔名: " + file.name + ',大小: ’ + fileSize + “”;
//獲取form資料
var formData = new FormData($(”#importFileForm")[0]);
//呼叫apicontroller後臺action方法，將form資料傳遞給後臺處理。contentType必須設定為false,否則chrome和firefox不相容
$.ajax({
url: “/api/Product/NewMaterialImport/PostExcelData”,
type: ‘POST’,
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returnInfo) {
//上傳成功後將控制元件內容清空，並顯示上傳成功資訊
document.getElementById(‘fileImport’).value = null;
document.getElementById(‘uploadInfo’).innerHTML = “” + returnInfo + “”;
},
error: function (returnInfo) {
//上傳失敗時顯示上傳失敗資訊
document.getElementById(‘uploadInfo’).innerHTML = “” + returnInfo + “”;
}
});
}
else {
alert(“檔案型別錯誤”);
//將錯誤資訊顯示在前端label文字中
document.getElementById(‘fileName’).innerHTML = “錯誤提示:上傳檔案應該是.xlsx字尾而不應該是” + file_typename + “,請重新選擇檔案”
}
}

3.apicontroller程式碼

///
/// 將檔案上傳到指定路徑中儲存
///
/// 上傳檔案結果資訊
[System.Web.Http.HttpPost]
[ValidateInput(false)]
public string PostExcelData()
{
string info = string.Empty;
try
{
//獲取客戶端上傳的檔案集合
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
//判斷是否存在檔案
if (files.Count > 0)
{
//獲取檔案集合中的第一個檔案(每次只上傳一個檔案)
HttpPostedFile file = files[0];
//定義檔案存放的目標路徑
string targetDir = System.Web.HttpContext.Current.Server.MapPath("~/FileUpLoad/Product");
//建立目標路徑
ZFiles.CreateDirectory(targetDir);
//組合成檔案的完整路徑
string path = System.IO.Path.Combine(targetDir, System.IO.Path.GetFileName(file.FileName));
//儲存上傳的檔案到指定路徑中
file.SaveAs(path);
info = “上傳成功”;
}
else
{
info = “上傳失敗”;
}
}
catch
{
info= “上傳失敗”;
}
return info;
}