AJAX上传大文件不起作用

使用 AJAX 上传大文件时，可能会遇到一些常见问题，如浏览器限制、服务器配置、网络问题等。以下是一些常见问题的排查步骤和解决方案：

1. 浏览器限制

不同浏览器对上传文件的大小可能有不同的限制。确保你使用的浏览器支持大文件上传。

2. 服务器配置

服务器端可能对上传文件的大小有配置限制。以下是一些常见的服务器配置：

Nginx

在 Nginx 配置文件中（通常是 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default），增加或修改以下配置：

http {
    client_max_body_size 100M;  # 设置最大上传文件大小为 100MB
}

Apache

在 Apache 配置文件中（通常是 httpd.conf 或 .htaccess），增加或修改以下配置：

<IfModule mod_php7.c>
    php_value upload_max_filesize 100M
    php_value post_max_size 100M
</IfModule>

PHP

如果你使用 PHP 作为服务器端语言，确保在 php.ini 文件中配置以下选项：

upload_max_filesize = 100M
post_max_size = 100M

3. 分块上传

对于非常大的文件，建议使用分块上传（chunked upload）来避免浏览器和服务器的限制。以下是一个使用 JavaScript 和 AJAX 实现分块上传的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chunked File Upload</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload</button>

    <script src="upload.js"></script>
</body>
</html>

JavaScript (upload.js)

function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    const chunkSize = 1024 * 1024; // 1MB
    const totalChunks = Math.ceil(file.size / chunkSize);

    let currentChunk = 0;

    function uploadNextChunk() {
        const start = currentChunk * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);

        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('chunkNumber', currentChunk);
        formData.append('totalChunks', totalChunks);
        formData.append('fileName', file.name);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);

        xhr.onload = function () {
            if (xhr.status === 200) {
                currentChunk++;
                if (currentChunk < totalChunks) {
                    uploadNextChunk();
                } else {
                    console.log('Upload complete');
                }
            } else {
                console.error('Upload failed');
            }
        };

        xhr.send(formData);
    }

    uploadNextChunk();
}

服务器端 (Node.js 示例)

以下是一个使用 Node.js 和 Express 处理分块上传的示例：

const express = require('express');
const fs = require('fs');
const path = require('path');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    const { chunkNumber, totalChunks, fileName } = req.body;
    const chunkPath = req.file.path;
    const uploadDir = path.join(__dirname, 'uploads', fileName);

    if (!fs.existsSync(uploadDir)) {
        fs.mkdirSync(uploadDir, { recursive: true });
    }

    const destPath = path.join(uploadDir, `${chunkNumber}`);
    fs.renameSync(chunkPath, destPath);

    if (parseInt(chunkNumber) + 1 === parseInt(totalChunks)) {
        const finalPath = path.join(__dirname, 'uploads', fileName);
        const writeStream = fs.createWriteStream(finalPath);

        for (let i = 0; i < totalChunks; i++) {
            const chunkFilePath = path.join(uploadDir, `${i}`);
            const data = fs.readFileSync(chunkFilePath);
            writeStream.write(data);
            fs.unlinkSync(chunkFilePath);
        }

        writeStream.end();
        fs.rmdirSync(uploadDir);
    }

    res.sendStatus(200);
});

app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

4. 网络问题

确保网络连接稳定，避免在上传过程中断开连接。可以在客户端实现重试机制，以应对网络不稳定的情况。

5. 超时设置

确保服务器端的超时设置足够长，以处理大文件上传。以下是一些常见的超时设置：

Nginx

http {
    client_body_timeout 300s;
    send_timeout 300s;
}

Apache

Timeout 300

页面内容是否对你有帮助？

有帮助

没帮助

AJAX上传大文件不起作用

、、

我想用ajax post方法上传文件 type: 'POST', url: '@Url.Action("Add", "Media")'但是当我尝试上传90MB的pdf文件时，它并没有进入控制器。问题出在哪里？提前谢谢。

浏览 0提问于2017-01-31得票数 1

回答已采纳

3回答

如何提交包含大文件上传和发送ajax请求的表单？

、、

这在其他浏览器中有效，但在chrome中不起作用。我正在尝试允许用户上传大文件，并使用ajax调用来更新文件上传的进度。ajax调用转到另一个页面，并使用该ID查找上载。有什么方法可以

浏览 0提问于2011-03-09得票数 1

1回答

上传大图片时，在网络连接中止后恢复还是重新启动ajax请求？

、、、、

我正在尝试使用PLUpload library.at fileUploaded函数上传大文件，我有ajax调用上传图像到亚马逊S3，但ajax调用失败，提示错误，网络连接中止。

浏览 18提问于2019-11-21得票数 1

回答已采纳

3回答

上传文件到服务器是通过正常的请求，而ajax不工作Ruby on Rails

、、

我目前正在尝试在rails上上传一个带有ajax请求的文件。respond_to do |format| format.js end因此，当Upload按钮被触发时，我会得到一个对服务器的普通请求，而不是一个ajax请求(

浏览 3提问于2014-03-06得票数 0

2回答

上传大文件时会话过期

、、

我的PHP会话工作得很好，但有时在上传大文件(主要是视频，上传需要几个小时)时，PHP会话过期。在这种情况下，用户上传大视频失败。如何防止过期？

浏览 0提问于2014-05-21得票数 0

1回答

Wicket文件上传会在大于最大值的文件上导致ajax错误。

、、、

在我的项目中，我使用以下堆栈：弹簧-启动1.3.8wicket-引导0.9.21ERROR: Cannot read Ajax response for multipart form submit: SecurityError: Blocked a frame withERROR: Wicke

浏览 2提问于2017-06-02得票数 0

回答已采纳

2回答

上传大文件的最快方式

、、

我已经实现了fineuploader来上传文件，而不需要重新加载页面。问题是它非常慢，对于不同大小的文件(大约300M)可能会失败。我的问题是，对于大文件，我是否应该根本不使用某种基于Ajax的文件上传方法，而是根据它们的大小退回到某种更传统的解决方案，即重新加载页面？使用网站而不是FTP上传大文件的最快方法是什么，等等？

浏览 4提问于2014-06-01得票数 0

1回答

Laravel5.4块上传和可恢复上传用于更大的文件

、、、

我想知道Laravel5.4或更高版本是否支持大文件大小的分块文件上传，在出现网络问题时也可以恢复支持。有什么包裹什么的吗。目前，我正在使用ajax文件上传。

浏览 2提问于2018-03-09得票数 0

回答已采纳

2回答

处理MaxUploadSizeExceededException : Ajax文件上传

、、、

如何在基于MaxUploadSizeExceededException的文件上传操作中有效地处理ajax。我该

浏览 4提问于2015-01-19得票数 1

回答已采纳

1回答

我正在尝试使用https上传大文件，但是我得到了异常“I/O error during system call，Broken”当我使用http上传时，同样的代码也可以工作。我读到这个问题是在Android2.3上发现的，我正在使用Android4.3，它仍然在发生…… 当我上传小文件时也会发生这种情况。如果我删除con.setChunkedStreamingMode(1024)；并以一个块的形式上传文件，那么小文件就不会发生这种情况(我不能对大文件执行此操作)。

浏览 1提问于2014-10-01得票数 7

1回答

接收尽可能多的未完成的HTTP请求

、、

在我对NGINX的PHP测试中，如果在上传过程中连接下降，我的PHP似乎永远不会启动。我在脚本的顶部有ignore_user_abort(1)，但这似乎只有在收到完整请求后才有意义。======= 我应该澄清的是，这不是一次上传一个大文件的问题，我想要的就像连接中断一样，我能从中断的地方捡起来吗？

浏览 2提问于2015-07-06得票数 1

回答已采纳

1回答

文件-上载-与-preview.min.js显示错误时，上传一个大文件

、、

当上传一个大文件(比如30 mb的文件)时，文件上传带有-preview.min.js显示错误，.it显示错误。ajax调用正在执行错误函数..。在我的例子中，我试图上传大小为100到100个mb.small文件的视频，高达10 mb的文件正在上传。以下是的详细信息提前感谢

浏览 1提问于2021-09-22得票数 0

2回答

下拉区域图像上载选项无效:(

、、、

我试图建立一个拖放图像上传，但下拉区域选项不工作，我不知道我是否做了正确的方式。 <html> <title></title> <script src="//ajax.goog

浏览 1提问于2013-08-03得票数 8

回答已采纳

2回答

上传文件大小问题(HTML5，Javascript，PHP)

、、、

我在互联网上学习了如何用HTML5、Javascript和PHP创建上传表单的教程。当我试图上传时，我上传的小文件很好，但如果我输入更大的东西，它会给我一个错误。我想，我的第一个错误是因为IIS没有被配置成上传大文件，所以我修正了这个问题，从那时起，每当我试图从PHP获得文件时，我就什么也得不到。我得到的是空参数。("load", completeHandler, false); ajax.addEventListener("error", e

浏览 1提问于2014-01-23得票数 0

回答已采纳

5回答

在.NET中上传大型文件

、、、、

我做了大量的研究，以找到一个上传组件的.NET，我可以用来上传大文件，有一个进度条，并可以继续上传大文件。我遇到了一些组件，如、和，举几个例子。这些选项中的每一个都要花钱，只有PowUpload才能完成可恢复的上传，但它使用的是java applet。我愿意为一个做得很好的组件付钱，但是如果我能自己写的话，那就最好了。我有两个问题：可以不使用flash/java/Silverlight在客户端恢复文件上传吗？有没有人有一些代码或链接来解释如何编

浏览 10提问于2008-11-12得票数 11

回答已采纳

1回答

Jquery Ajax上传大文件出错

、、、、

我正在使用在我正在处理的管理面板上裁剪图像。这个插件将给你裁剪的图像作为base64字符串，我将发送该字符串到服务器，然后将其转换为服务器上的图像，这工作得很好，因为我使用平均大小的图像(我已经成功尝试的最大的是880KB)，但然后我尝试了7MB的图像和大约15%~20%的进度，请求给404错误。<httpRuntime maxRequestLength="1048576"和 &

浏览 3提问于2015-01-25得票数 2

3回答

我应该如何停止一个“进行中”的jquery帖子？

、、、

我有一个jQuery ajax帖子，我用帖子上传大文件。我想给用户取消提交的能力，单击一个按钮，而提交正在进行中。我该怎么做呢？

浏览 3提问于2011-07-16得票数 4

1回答

javascript FileReader上传“请求实体太大”

、、、、

当我在Chrome中通过ajax上传文件时，我正试图处理从请求中删除的文件。', ajax_uploads[file_idx].fileData);} else { initialiseAjaxProgressBar(upload_id);我遇到的问题是，如果上传的文件超过几兆字节，就会导致Request Entity Too

浏览 0提问于2015-09-09得票数 1

回答已采纳

4回答

Jquery/Ajax文件上传器

、、、、

我正在寻找一个jquery或ajax文件上传器，我目前使用的FancyUploader，这工作很棒，直到闪光带来了他们的更新，使所有的闪光进度条取消，现在每当我试图上传大文件…它将在几秒钟内将进度条填满100%，即使实际的上传在几分钟后完成。所以我现在寻找一个新的上传脚本，不需要闪存，但仍然可以显示进度。有什么建议吗？

浏览 0提问于2010-05-13得票数 1

2回答

上传大文件不起作用

、、

我现在正在使用PHP将图片上传到我的服务器。但是-显然-文件大小是有限制的，我不能修改.htaccess文件，也不能访问php.ini文件。在我的主文件夹中创建一个新的php.ini，或者在php中使用ini_set()都没有帮助，所以我的问题是:有没有一种方法可以上传更大的文件而不需要修改php.ini或.htaccess？

浏览 5提问于2011-07-21得票数 1

点击加载更多