jquery使用HTML5实现异步上传文件

标签: jqueryHTML5文件上传   时间:2017-07-28
HTML5可以使用Ajax和jQuery进行文件异步上传。不仅如此,您可以执行文件验证(名称,大小和MIME类型)或使用HTML5进度标签(或div)处理进度事件,本文章向大家介绍jquery使用HTML5实现文件异步上传。

最近我不得实现一个文件异步上传的功能,但是我不想使用Flash或Iframe或者插件,经过一些研究,我想出了这个解决方案。于是分享给大家:

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

首先,您可以根据需要进行一些验证。例如,在文件的onChange事件中:

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

点击按钮并实现AJAX异步上传文件:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
    });
});

从上面代码你可以看到,HTML5文件上传不仅变得可能而且非常简单。

原文地址:http://www.manongjc.com/article/2142.html

上一篇:分享php多文件上传实现源码

下一篇:已是最后一篇