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());
        }
    });