Code pour le téléchargement de fichiers Ajax et l'affichage de la barre de progression du processus de téléchargement de fichiers

Le contenu de cet article concerne le code pour le téléchargement de fichiers Ajax et l'affichage de la barre de progression du processus de téléchargement de fichiers. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

J'apprends ASP.NET MVC récemment, il m'est donc arrivé de télécharger des fichiers et de les enregistrer.
En plus de jQuery, le front-end utilise également Bootstrap et Layer.

Formulaire dans la page HTML :

<form class="form-horizontal" id="vform" action="">
    <div class="form-group">
        <label class="col-sm-3 control-label">资源名称：</label>
        <div class="col-sm-8">
            <input name="name" type="text" class="form-control" id="name" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">请选择本地资源：</label>
        <div class="col-sm-8">
            <input name="file" type="file" class="form-control" id="file" />
            <div class="progress">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-3">
            <input class="btn btn-primary" id="submit" value="确认上传" />
        </div>
    </div>
</form>

Code JavaScript :

<script>
    $("#submit").click(function () {
        var formData = new FormData(document.getElementById("vform"));
        $.ajax({
            type: "POST",
            url: "@Url.Action("DoAdd")",
            data: formData,
            processData: false,
            contentType: false,
            error: function (data) {
                layer.msg(&#39;上传失败&#39;, {
                    icon: 2,
                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                });
            },
            success: function (data) {
                if (data.code == 1) {
                    layer.msg(&#39;上传成功&#39;, {
                        icon: 1,
                        time: 1000 //1秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        parent.location.reload();
                    });
                }                else {
                    layer.msg(data.msg, {
                        icon: 2,
                        time: 1000 //1秒关闭（如果不配置，默认是3秒）
                    });
                }
            },
            xhr: function () {
                myXhr = $.ajaxSettings.xhr();                if (myXhr.upload) { //检查upload属性是否存在  
                    //绑定progress事件的回调函数  
                    myXhr.upload.addEventListener(&#39;progress&#39;, progressHandlingFunction, false);
                }                return myXhr; //xhr对象返回给jQuery使用
            }
        });
    });    function progressHandlingFunction(event) {
        var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比
        $("#progress-bar").html(loaded + "%").css("width", loaded + "%");
    }</script>

Recommandations associées :

js implémente la décompression gzip Comment faire implémenter le code de

js pour réaliser l'effet de cliquer sur la petite image pour afficher la grande image ? (exemple de code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!