Ajax文件上传全面攻略

一、Ajax文件上传和下载

在网页开发中，文件上传和下载是非常常见的功能，而基于Ajax的文件上传和下载能够在不刷新整个页面的情况下进行操作，提高用户体验。Ajax技术使异步上传变得容易，用户可以在上传期间进行其他操作。

使用jQuery和ajax实现简单的文件上传和下载非常简单，jQuery中的ajax方法可以通过POST请求上传文件，通过GET请求下载文件。下面是一个使用jQuery的上传和下载代码示例：

$.ajax({
    url:'upload.php',
    type:'POST',
    dataType:'json',
    data:formData,
    processData: false,
    contentType: false,
    success:function(data){
        alert("上传成功");
    },
    error:function(){
        alert("上传失败");
    }
});

$.ajax({
    url:'download.php',
    type:'GET',
    success:function(data){
        alert("下载成功");
    },
    error:function(){
        alert("下载失败");
    }
});

二、Ajax文件上传请求500错误

在使用Ajax上传文件的时候，有时候会遇到500错误，这是由于上传文件的大小超过了服务器设置的上传文件的最大值，需要调整服务器的设置。可以编辑php.ini文件并调整upload_max_filesize和post_max_size值。

upload_max_filesize=100M
post_max_size=100M

三、Ajax文件上传到指定位置

在上传文件时，我们可能需要将文件存储在指定的位置。这可以通过设置服务器端语言（如php）来实现。在下面的示例中，通过move_uploaded_file函数将上传的文件移动到指定的文件夹中：

$uploadFolder = 'uploads/';
$filePath = $uploadFolder . $_FILES['file']['name'];
if(move_uploaded_file($_FILES['file']['tmp_name'], $filePath)){
    echo "上传成功";
}else{
    echo "上传失败";
}

四、Ajax上传文件进度条

在上传大文件时，会需要进度条，让用户看到上传进度。要实现这个效果，需要通过Ajax的onprogress事件实现。下面是一个上传文件时同时显示文件上传进度条的示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);

xhr.upload.onprogress = function(e){
    if(e.lengthComputable){
        var percentage = (e.loaded / e.total) * 100;
        $('#progressbar').progressbar('value', percentage);
    }
};

xhr.onload = function(){
    alert('上传成功');
};

xhr.send(formData);

五、Ajax传文件

Ajax上传和下载几乎适用于所有类型的文件，包括文本、图像、音频和视频等。下面是一个使用Ajax上传视频文件并将其嵌入到网页中的示例：

function uploadVideo(){
    var fileInput = document.getElementById("video");
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('video', file);

    $.ajax({
        url:'upload.php',
        type:'POST',
        dataType:'json',
        data:formData,
        processData: false,
        contentType: false,
        success:function(data){
            $('#videocontainer').html('
  ');
        },
        error:function(){
            alert("上传失败");
        }
    });
}

六、.ajax文件

jquery.file插件允许大的文件选择并以小数据块的方式上传。这减少了php.ini设置的重要性，并且更容易设置。这个示例使用jquery.file.js插件将上传文件分块并上传到服务器，并在上传过程中显示进度条。

$('#fileUpload').file({
    uploadPath: '/uploads',
    fileSize: 1024*1024,
    allowedTypes: "jpg,png,gif,doc,pdf,zip",
    showStatusAfterSuccess: false,
    showProgress: true,
    onFail: function(files) {
        alert('文件上传失败');
    },
    onSuccess: function(files, data, xhr) {
        alert('文件上传成功！');
    }
});

七、Ajax实现文件上传

在实现文件上传时，需要使用form表单。在下面的示例中，使用form表单实现文件上传，并通过Ajax向服务器发送表单数据：

$('#fileuploadform').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

八、Ajaxfileupload上传文件

jQuery文件上传插件ajaxfileupload可以将文件上传到服务器，并在上传过程中显示进度条。这个插件不需要在服务器端进行任何设置，并且支持传输所有类型的文件。

$.ajaxFileUpload({
    url: 'upload.php',
    secureuri: false,
    fileElementId: 'fileToUpload',
    dataType: 'json',
    success: function (data, status) {
        if (typeof (data.error) != 'undefined') {
            if (data.error != '') {
                alert(data.error);
            } else {
                alert(data.msg);
            }
        }
    },
    error: function (data, status, e) {
        alert(e);
    }
});

九、Ajax上传文件和参数

在上传文件时，可能需要提交文件以外的其他表单数据。这可以通过FormData对象实现。在下面的示例中，除了上传文件，还传递了其他参数：

var formData = new FormData($(this)[0]);
formData.append('name', $('#name').val());
formData.append('email', $('#email').val());

$.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    success: function (data) {
        alert(data);
    },
    cache: false,
    contentType: false,
    processData: false
});

十、js大文件上传选取

在上传大文件（如视频、音频）时，为了更好的用户体验，一般会将文件分成较小的块上传，然后在服务器端将它们组合在一起。下面是一个选取大文件并分块上传的示例，使用了slice方法将文件分成chunkSize大小的块：

var fileInput = document.getElementById("videofile");
var file = fileInput.files[0];
var chunkSize = 1024 * 1024; // 1MB

var start = 0, end = chunkSize;
while(start < file.size){
    var slice = file.slice(start, end);
    formData = new FormData();
    formData.append('file', slice);
    formData.append('start', start);
    $.ajax({
        url:'upload.php',
        type:'POST',
        data:formData,
        processData: false,
        contentType: false,
        success:function(data){
            alert("上传成功");
        },
        error:function(){
            alert("上传失败");
        }
    });
    start = end;
    end = start + chunkSize;
}