AJAX POST 文件在移动设备上失败

Posted 2023-02-19

技术标签:

【中文标题】AJAX POST 文件在移动设备上失败【英文标题】：AJAX POST File failed on mobile 【发布时间】：2018-12-23 13:06:09 【问题描述】：

我想创建一个表单来通过使用 POST 方法调用 API 来上传文档。

它在桌面上运行良好，但移动浏览器在上传操作上完全不起作用。

设备：iPhone X - ios 11.4

移动浏览器：Google Chrome & Safari（现在都更新了）

<form id="docsUpload">
    <input type="hidden" name="token" value="aa">
    <input type="file" class="upload-file" id="brFile" name="brFile" data-text="Find file">
    <button id="submitBtn" class="btn btn-custom btn-upload" type="button">
        <span name="langKey">Upload</span>
    </button>
</form>

JQUERY 代码：

$('#submitBtn').on('click', function (e) 
    e.preventDefault();
    var data = new FormData($('#docsUpload')[0]);
    var newToken = data.get('token');
    newToken = encodeURIComponent(newToken);

    $.ajax(
        url: host + 'uploadFile?token=' + newToken,
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        enctype: 'multipart/form-data',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function (response) 
            console.log(response)
            if (response.isUploadSuccess) 
                return showResult('ok', 'uploadSuccess', response.uploadMessage);
            
            return showResult('fail', 'uploadFail', response.uploadMessage);
        , error: function (jqXHR, textStatus, errorThrown) 
            console.log(jqXHR);
            let errorMsg = JSON.stringify(jqXHR)
            return showResult('fail', 'uploadFail', errorMsg + '<br>' + textStatus + '<br>' + errorThrown)
        
    )
);

上面的代码在PC浏览器中完全可以正常运行，但是在手机上运行时总是出现以下错误：

"readtState":0,"status":0,"statusText":"error"

附加信息：

ajax url中的“host”为https://www.example-A.com，JS加载在https://www.example-B.com。但是，www.example-A.com Web 服务器端已经将 Access-Control-Allow-Origin 设置为通配符（“*”）。这就是为什么 PC 浏览器完全可以正常工作的原因。

我现在完全迷路了..请帮忙。

谢谢。

【问题讨论】：

***.com/questions/19395354/… 讨论了与您类似的错误，但解决方案似乎正在使用 e.preventDefault()，您确实包括在内。每***.com/questions/11994833/…，你也试过e. stopPropagation()吗？是的，我试过了，可惜还是不行 “对上传操作完全不起作用”是什么意思？具体是怎么回事？当点击上传按钮时，它会显示错误"readtState":0,"status":0,"statusText":"error"。 【参考方案1】：

我也有同样的问题。我无法解决这个问题。我还想为我补充一件事，即使在移动 WiFi 网络上，它也只能在移动数据上运行失败。我确实在同一来源上添加了一个页面，并且从服务器端确实获得了 JSON 并呈现到浏览器，至少这解决了我的问题。

【讨论】：

【参考方案2】：

这可能是一个迟到的答案。但是我今天遇到了同样的问题。不确定它是否会帮助任何人，但发现是我们运行 nginx 的服务器，其文件上传限制为 1MB。一旦我们提高了这个限制，我们就不再收到这些拒绝了。

这里是关于学习 Ngnix 文件大小上传限制的资源。希望它可以帮助可能遇到同样问题的其他人。

https://www.tecmint.com/limit-file-upload-size-in-nginx/

【讨论】：