基于jQuery的ajax系列之用FormData实现页面无刷新上传

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