JQuery BootStrap 美化的多檔案輸入框
記錄下前面做的一個 JQueryBootStrap 美化的多檔案輸入框，js程式碼負責重新打包fromdata資料，提交給標準的WebApi，根據api的json答覆顯示結果
效果
html碼
<div class="form-group">
<div class="container">
<div class="row">
<div class="col-md-4">
<input id="file" multiple="multiple" type="file" style="display: none" />
<input id="photoCover" placeholder="您可以用手機拍照或上傳文件" class="form-control" type="text" />
</div>
<div class="col-md-2">
<a class="form-control" onclick="$('input[id=file]').click();">Browse 點選選擇檔案</a>
</div>
</div>
</div>
</div>
JS程式碼
$('#contact-submit').click(function (e) {
//stop the form from being submitted
e.preventDefault();
/* declare the variables, var error is the variable that we use on the end
to determine if there was an error or not */
var error = false;
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
if (name.length == 0) {
var error = true;
$('#name').css("border-color", "#D8000C");
} else {
$('#name').css("border-color", "#666");
}
if (email.length == 0 || email.indexOf('@') == '-1') {
var error = true;
$('#email').css("border-color", "#D8000C");
} else {
$('#email').css("border-color", "#666");
}
if (subject.length == 0) {
var error = true;
$('#subject').css("border-color", "#D8000C");
} else {
$('#subject').css("border-color", "#666");
}
if (message.length == 0) {
var error = true;
$('#message').css("border-color", "#D8000C");
} else {
$('#message').css("border-color", "#666");
}
//now when the validation is done we check if the error variable is false (no errors)
if (error == false) {
var formData = new FormData();
formData.append('name', $('#name').val());
formData.append('email', $('#email').val());
formData.append('subject', $('#subject').val());
formData.append('message', $('#message').val());
var vali = 0;
if ($('#file')[0].files.length > 0) {
for (vali = 0; vali < $('#file')[0].files.length;vali++) {
formData.append('file' + vali, $('#file')[0].files[vali]);
}
}
$.ajax({
url: "api/contact_submit",
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (result) {
try {
var obj = JSON.parse(result);
if (obj.errorcode == "success") {
//if the mail is sent remove the submit paragraph
$('#cf-submit').remove();
//and show the mail success div with fadeIn
$('#mail-success').fadeIn(500);
$("#contact-form").resetForm();
} else {
//show the mail failed div
$('#mail-fail').text('抱歉，api錯誤！' + obj.message);
$('#mail-fail').fadeIn(500);
//re enable the submit button by removing attribute disabled and change the text back to Send The Message
$('#contact-submit').removeAttr('disabled').attr('value', 'Send The Message');
}
} catch (err) {
//show the mail failed div
$('#mail-fail').text('返回資訊有誤！' + err);
$('#mail-fail').fadeIn(500);
//re enable the submit button by removing attribute disabled and change the text back to Send The Message
$('#contact-submit').removeAttr('disabled').attr('value', 'Send The Message');
}
},
error: function (error) { alert(error); }
});
}
});
//檔案選擇框的美化樣式必須
$('input[id=file]').change(function () {
console.log(this);
if ($('#file')[0].files.length > 1) {
$('#photoCover').val("已經選擇" + $('#file')[0].files.length+"個檔案.");
} else {
$('#photoCover').val($(this).val());
}
});