在這示範是使用 Ajax 上傳檔案以及svg樣式 HTML代碼如下
<div class="uploadbox">
<input type="file" name="files[]" id="fileupload" class="inputfile" data-multiple-caption="{count} files selected"multiple>
<label for="fileupload">
<figure>
<span>匯入檔案</span>
<div class="uploadboxitem">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.82.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.41.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
</svg>
</div>
</figure>
</label>
</div>
以下是 CSS樣式
.uploadbox {
display: inline-block;
width: 95px;
height: 0px;
position: relative;
vertical-align: middle;
padding-bottom: 25px;
}
.uploadbox input[type=file]{
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: relative;
z-index: -1;
}
.uploadbox label{
width: 95px;
height: auto;
white-space: nowrap;
text-overflow: ellipsis;
}
.uploadbox label figure{
width: 95px;
border-radius: 12px;
border: solid 0.3px #b5b5b5;
font-family: Microsoft JhengHei;
font-size: 12.7px;
letter-spacing: 1.3px;
text-align: center;
color: #343434;
font-weight: bold;
height: 24px;
line-height: normal;
display: block;
cursor: pointer;
background-color: #a6a0a1;
padding: 1px;
}
.uploadbox label figure span{
padding: 0px;
display: inline-flex;
vertical-align: middle;
margin: auto;
color: #f1e5e6;
}
.uploadbox label figure .uploadboxitem{
display: inline-flex;
vertical-align: middle;
margin: auto;
}
.uploadbox label figure .uploadboxitem svg{
fill: #f1e5e6;
}
以下是 Javascript 以及Ajax範例
function uploadFile() {
var fileSelect = document.getElementById('fileupload');
//Get the selected files from the input.
var files = fileSelect.files;
//Create a new FormData object.
var formData = new FormData();
//Loop through each of the selected files.
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.size <= 0) {return;}
if (file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
file.type !== "application/vnd.ms-excel" &&
(file.type !== "text/xml" && file.type !== "application/xml")) {
//將value 歸回原始值也就是空值狀態
fileSelect.value = fileSelect.defaultValue;
return;}
if (file.size >= 5242880) {
fileSelect.value = fileSelect.defaultValue;
return;
}
//Add the file to the request.
formData.append('files[]', file, file.name);
}
//Set up the request. 開始使用Ajax
var xhr = new XMLHttpRequest();
//Open the connection.
xhr.open('POST', '@Url.Action("UploadFile",CommonRazorFunctions.GetControllerName())', true);
xhr.setRequestHeader('RequestVerificationToken', '@CommonRazorFunctions.GetAntiForgeryToken()');
//Send the Data.
xhr.send(formData);
//Set up a handler for when the request finishes.
xhr.onload = function () {
//fileSelect.value = fileSelect.defaultValue;
if (xhr.status === 200) {
//轉成物件
let result = JSON.parse(xhr.response);
if (result.success === true) {
//do somethings
}
else {
//do error somethings
}
} else {
alert('An error occurred!');
}
};
};
REFERENCE / 6