html代码:


<div class="box">
            <div>
                <div class="item">
                    <input type="file" name="myfile" style="font-size: 0.7rem;">
                </div>
                <div class="item">
                    <button type="button" style="display: block; padding: 4px 18px;" class="btn-default">ajax提交</button>
                </div>
                <div class="item">
                    <button type="submit" style="display: block; padding: 4px 18px;" class="btn-default">form提交</button>
                </div>
            </div>
            <div class="prompt" style="font-size: 0.7rem;"></div>
        </div>
        <script src="../../js/jquery-3.1.0.min.js"></script>
        <script src="upload01.js"></script>

upload01.js代码:


$(function($) {
    $('input[name=myfile]').on('change', function(e) {
        $('button[type=button]').on('click', function(e) {
            var formData = new FormData();
            // formData.ppend(name, element);
            formData.append('myfile', $('input[name=myfile]')[0].files[0]);
            $.ajax({
                url: 'upload01.php',
                method: 'POST',
                data: formData,
                contentType: false, // 注意这里应设为false
                processData: false,
                cache: false,
                success: function(data) {
                    if (JSON.parse(data).result == 1) {
                        $('.prompt').html(`文件${JSON.parse(data).filename}已上传成功`);
                    }
                },
                error: function (jqXHR) {
                    console.log(JSON.stringify(jqXHR));
                }
            })
            .done(function(data) {
                console.log('done');
            })
            .fail(function(data) {
                console.log('fail');
            })
            .always(function(data) {
                console.log('always');
            });
        });
    });
});
原文:http://www.cnblogs.com/yangtoude/p/jquery-ajax-formdata-upload.html




看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于基于jQuery的ajax系列之用FormData实现页面无刷新上传的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
上海年薪30万的IT男过怎样的生活?
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信