Upload com ajax e jquery

HTML

<form name="frmContact" method="post" enctype="multipart/form-data" action="/ajax/upload" >
<div>
     <input name="name" required class="nome form-control" type="text" placeholder="Digite seu nome">
</div>
<div class="file-upload">
    <input type="file" name="file-upload">
</div>
<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>
</form>

CSS

    <style>
        #progress-wrp {
            border: 1px solid #E55000;
            padding: 1px;
            position: relative;
            height: 30px;
            border-radius: 3px;
            margin: 10px;
            text-align: left;
            background: #fff;
            box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
        }
        #progress-wrp .progress-bar{
            height: 100%;
            border-radius: 3px;
            background-color: #ff8900;
            width: 0;
            box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
        }
        #progress-wrp .status{
            top:3px;
            left:50%;
            position:absolute;
            display:inline-block;
            color: #E55000;
        }
    </style>

JAVASCRIPT

(function ($) {
$("form[name=frmContact]").submit(function (e) {
    e.preventDefault();
    var data;
    var contentType = "application/x-www-form-urlencoded";
    var processData = true;
    if ($(this).attr('enctype') == 'multipart/form-data') {
        data = new FormData($(this).get(0));//seleciona classe form-horizontal adicionada na tag form do html
        contentType = false;
        processData = false;
    } else {
        data = $(this).serialize();
    }

    $.ajax({
        data: data,
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        contentType: contentType,
        processData: processData,
        success: function (response) {
            console.log(response);
        },
        error: function (exr, sender) {
            alert('Erro ao carregar pagina');
        },
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Avalia se tem suporte a propriedade upload
                myXhr.upload.addEventListener('progress', function (event) {
                    /* faz alguma coisa durante o progresso do upload */
                    var percent = 0;
                    var position = event.loaded || event.position;
                    var total = event.total;
                    var progress_bar_id = "#progress-wrp";
                    if (event.lengthComputable) {
                        percent = Math.ceil(position / total * 100);
                    }
                    // update progressbars classes so it fits your code
                    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
                    $(progress_bar_id + " .status").text(percent + "%");
                }, false);
            }
            return myXhr;
        }
    });
});
})(jQuery);

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.