ajax 上传图片进度条

AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术。通过使用AJAX，可以使网页在不刷新的情况下，与服务器进行异步通信，实现动态内容的加载和更新。其中一个常见的应用场景是上传图片，在上传图片的过程中，用户可以看到一个进度条，实时显示上传进度。这样用户就可以清楚地知道上传的进展情况。本文将介绍如何使用AJAX实现图片上传进度条，并提供代码示例以帮助读者快速理解。

一般来说，实现图片上传进度条的方式有两种。第一种是通过JavaScript的XMLHttpRequest对象发送文件，并监听上传进度事件来更新进度条。第二种是使用第三方插件，例如jQuery插件，可以更加方便地实现上传进度条。以下将分别介绍这两种方法。

使用XMLHttpRequest对象实现图片上传进度条

首先，我们必须创建一个XMLHttpRequest对象，用于和服务器进行通信。然后，通过调用open()方法和服务器建立连接，并使用setRequestHeader()方法设置请求头。接下来，我们需要监听XMLHttpRequest对象的upload.onprogress事件，该事件在上传过程中不断触发，我们可以通过该事件获取上传进度信息。最后，通过send()方法将文件发送给服务器。

var xhr = new XMLHttpRequest();
var fileInput = document.getElementById('fileInput');
var progressBar = document.getElementById('progressBar');

xhr.upload.addEventListener('progress',function (e) {
    if (e.lengthComputable) {
        var percentage = Math.round((e.loaded / e.total) * 100);
        progressBar.style.width = percentage + '%';
        progressBar.innerHTML = percentage + '%';
    }
},false);

xhr.open('POST','upload.PHP',true);
xhr.setRequestHeader('Content-Type','multipart/form-data');
xhr.send(fileInput.files[0]);

上述代码中，fileInput是一个HTML的input标签，用于选择要上传的图片。progressBar是一个表示进度条的HTML元素。在progress事件中，我们首先计算上传进度的百分比，并将其赋值给progressBar的宽度和innerHTML属性，以实现实时更新进度条的效果。

使用第三方插件实现图片上传进度条

除了手动使用XMLHttpRequest对象实现上传进度条外，我们也可以使用一些第三方插件来简化开发过程，并提供更加丰富的功能。其中一个常用的插件是jQuery插件，具有广泛的支持和社区资源。

下面是使用jQuery插件的示例代码：

$('#fileInput').on('change',function () {
    var formData = new FormData();
    formData.append('file',this.files[0]);

    $.ajax({
        url: 'upload.PHP',type: 'POST',data: formData,processData: false,contentType: false,xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress',function (e) {
                if (e.lengthComputable) {
                    var percentage = Math.round((e.loaded / e.total) * 100);
                    $('#progressBar').css('width',percentage + '%');
                    $('#progressBar').html(percentage + '%');
                }
            },false);
            return xhr;
        }
    });
});

在上述代码中，我们使用jQuery的$.ajax方法发起了一个AJAX请求。formData是一个FormData对象，用于包装要上传的文件。url指定了服务器的上传接口，type设置为POST，data参数为formData对象。processData和contentType设置为false，以确保发送的数据类型正确无误。

还需要注意的是，我们通过传入xhr选项来监听上传进度事件。在xhr选项的回调函数中，我们同样计算上传进度的百分比，并将其赋值给progressBar的宽度和HTML内容，以实现进度条的实时更新。

通过以上的示例代码，读者可以了解到如何使用AJAX实现图片上传进度条。无论是手动使用XMLHttpRequest对象，还是使用第三方插件，都可以轻松地实现这个功能。希望本文能够对读者有所帮助，并在实际开发中发挥积极的作用。