首頁  >  文章  >  web前端  >  Ajax上傳檔案同時顯示檔案上傳過程進度列的程式碼

Ajax上傳檔案同時顯示檔案上傳過程進度列的程式碼

不言
不言原創
2018-08-11 16:45:331380瀏覽

這篇文章帶給大家的內容是關於Ajax上傳檔案同時顯示檔案上傳過程進度條的程式碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

最近在學ASP.NET MVC,剛好做到檔案上傳,記錄一下。
前端除了jQuery還用了Bootstrap和Layer。

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>

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>

相關推薦:

##js實作gzip解壓縮的程式碼實作

js如何操作來實現點擊小圖顯示出大圖的效果? (程式碼範例)

以上是Ajax上傳檔案同時顯示檔案上傳過程進度列的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn