jquery 使用$.ajax 时获取原生XMLHttpRequest 对象

最新推荐文章于 2022-12-13 16:45:00 发布

公众号：码农富哥

最新推荐文章于 2022-12-13 16:45:00 发布

阅读量1.3w

点赞数

本文链接：https://blog.csdn.net/a519640026/article/details/18090695

版权

<script>
    $('.screenshot_input').change(function (){
        //获取file对象 即相当于可以直接post的$_FILES数据
        var domFile = $(this)[0].files[0]

        var domForm = $('#testForm')[0]
        //将form对象直接作为参数 new FormData对象
        var formData = new FormData(domForm);
        //追加file 对象
        formData.append('file',domFile);

        $.ajax({
            url:'{{ path( 'acme_admin_app_dealAppScreenShot') }}',
            type: "POST",
            data: formData,
            processData: false,  // tell jQuery not to process the data
            contentType: false,   // tell jQuery not to set contentType
            xhr: function(){        //这是关键  获取原生的xhr对象  做以前做的所有事情
                var xhr = jQuery.ajaxSettings.xhr();
                xhr.upload.onload = function (){
                    alert('finish downloading')
                }


                xhr.upload.onprogress = function (ev) {
                    if(ev.lengthComputable) {
                        var percent = 100 * ev.loaded/ev.total;
                        console.log(percent,ev)
                    }
                }
                return xhr;
            },
            success:function(data){
                alert(data)
            }
        })
    })
</script>


Array
(
    [name] => cooff
    [email] => qq.comaa
)
Array
(
    [file] => Array
        (
            [name] => yunce2.0测试.apk
            [type] => application/vnd.android.package-archive
            [tmp_name] => /tmp/php4Jxt0c
            [error] => 0
            [size] => 6476627
        )

)

一次过把form表单和 file 对象发送到PHP后端controller 处理起来非常方便

免费视频福利推荐：