Ajax上传文件同时显示文件上传过程进度条的代码-js教程-PHP中文网

Ajax上传文件同时显示文件上传过程进度条的代码

不言

发布： 2018-08-11 16:45:33

原创

1601人浏览过

本篇文章给大家带来的内容是关于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('上传失败', {
                    icon: 2,
                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                });
            },
            success: function (data) {
                if (data.code == 1) {
                    layer.msg('上传成功', {
                        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('progress', 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>

登录后复制

相关推荐：

Android传感器编程中文WORD版

本文档主要讲述的是Android传感器编程；传感器是一种物理装置或生物器官,能够探测、感受外界的信号、物理条件（如光、热、湿度）或化学组成（如烟雾），并将探知的信息传递给其它装置或器官。同时也可以说传感器是一种检测装置，能感受被测量的信息，并能将检测的感受到的信息，按一定规律变换成为电信号或其它所需形式的信息输出，以满足信息的传输、处理、存储、显示、记录和控制等要求。它是实现自动检测和自动控制的首要环节。感兴趣的朋友可以过来看看