jQuery显示Ajax文件上传进度

jQuery显示Ajax文件上传进度

<html>
    <head>
        <title>AjaxFormDataUpload</title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <!--<script src="jquery-3.2.1.js"></script>-->
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
            #upload-form {
                width: 50%;
                margin: 0 auto;
                border: 1px solid blue;
            }
            .field{
                padding: 10px;
            }
            .submit-btn{
                text-align:center;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <form id="upload-form">
            <div class="field">
                <input type="file" name="photo" accept="image/*">
                <span class="upload-progress"></span>
            </div>
            <div class="field">
                <input type="text" name="words">
            </div>
            <div class="submit-btn">
                <input type="button" value="submit">
            </div>
        </form>
    </body>
</html>

jQuery显示上传进度主要是靠监听xhr.upload.onprogress事件,测试的时候可以把浏览器network里的3G fast或3G slow的打开,就可以降低速度,模拟上传慢的情况:

$(document).ready(function(){
    $('input[type="button"]').on('click', function(){
        //方式一:用FormData获取form表单中的数据
        /*var form = $('#upload-form').get(0);
        var formData = new FormData(form);
        formData.append('photo', formData.get('photo'));
        formData.append('words', formData.get('words'));*/

        //方式二:当然,如果你的表单没有用form标签包起来,也可以不用formData的获取方式,直接获取也是可以的
        var file = $('input[name="photo"]').get(0).files[0];
        var words = $('input[name="words"]').val();
        var formData = new FormData();
        formData.append('photo', file);
        formData.append('words', words);

        $.ajax({
            type:'post',
            url:'./upload.php',
            data: formData,
            //contentType必须为false(否则会默认为:application/x-www-form-urlencoded; charset=UTF-8)
            contentType: false,
            //告诉jquery不要处理数据(否则报错:Uncaught TypeError: Illegal invocation)
            processData: false,
            xhr: function(){
                let xhr = new XMLHttpRequest();
                //监听上传进度事件
                xhr.upload.addEventListener('progress', function (e){
                    if (e.lengthComputable) {
                        let progress = e.loaded / e.total;
                        progress = Math.round(progress * 10000) / 100 + '%';
                        $('.upload-progress').html(progress);
                    }
                },false);
                return xhr;
            },
            success:function(response){
                console.log(response);
            }
        });
        return false;
    });
});
打赏

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

jQuery显示Ajax文件上传进度