Ajax上傳文件至MVC的controller
<!--這一行是假的filebox 用於呈現選取的File -->
<input id="false_fileBox" name="false_fileBox" placeholder="點此選擇檔案" type="text"/> <!--這一行是被隱藏起來的真filebox，用css將opacity(不透明度)設為0，再用margin(外邊距)給調整到與上方的textbox重疊的位置--> <input id="fileBox" name="fileBox" onchange="inFalseFilebox(this,'false_fileBox')" style="margin-top: -27px; margin-bottom: 8px; width: 100%; opacity: 0;" type="file" class="file" /> <!--上傳按鈕，會用他來觸發檔案上傳的事件--> <button type="button" onclick="fileUpload('fileBox')">上傳</button>紅色這段應該也可以直接使用<input id="file" type="file">直接呈現
甚至不需要Onchange就可以呈現目前選取的資料名稱
//第一個是在真的filebox中設定onchange
//讓真的filebox接收到檔案時，可以同步把檔案路徑名稱放進假的textbox中
//不然真的filebox被隱藏了，使用者也無法看到自己選擇了哪個檔案。
function inFalseFilebox(obj,id){
$('#'+id).val(obj.value);
}
//第二個是點擊按鈕後的上傳檔案事件
function fileUpload(id){
//取得該filebox中的檔案資料：
var files = document.getElementById(id).files;
//用JQ也可以寫成：
// var files = $('#'+id)[0].files;
//再來將剛剛取得的檔案資料放進FormData裡
var fileData = new FormData();
//files[0].name會回傳包含副檔名的檔案名稱
//所以要做檔案類型的判斷也可以用file[0].name做
fileData.append(files[0].name, files[0]);
//之後送ashx做處理
$.ajax({
url:fileUpload.ashx,
type: "post",
data: fileData,
contentType: false,
processData: false,
async: false,
success: function(){
//跳訊息提示
alert('上傳成功!');
//清掉假filebox中的內容
document.getElementById('false_fileBox').value='';
}
});
}
//上傳圖片檔案
//先宣告一個變數等等放檔案名稱
string fileName = "";
//判斷傳過來的fileData中有沒有夾帶檔案
if (context.Request.Files.Count > 0)
{
//如果有的話再把該檔案放進HttpPostedFile屬性中
HttpPostedFile file = files[0];
//FileName是C#的函數，可以取檔案名稱
fileName = file.FileName;
//用SaveAs的方法上傳圖片到指定的資料夾
file.SaveAs(context.Server.MapPath("/Upload/Image/" + fileName));
}
參考:https://ithelp.ithome.com.tw/articles/10190358
留言
張貼留言