Ajax 文件上传“尝试加载资源时发生错误”和网络连接在 Safari 中丢失

Posted 2023-05-08

【中文标题】Ajax 文件上传“尝试加载资源时发生错误”和网络连接在 Safari 中丢失

【英文标题】：Ajax File upload 'An error occurred trying to load resource' and network connection lost in Safari

【发布时间】：2019-05-19 21:58:00

【问题描述】：

我正在尝试上传一个文件和该文件的拇指（使用cropper v2.3.0）。 此代码适用于所有其他浏览器，但在 safari 中会出错。

问题描述如下：

在桌面上的 safari 浏览器上上传文件时出现以下错误，使用其他 safari 浏览器没有错误并获得成功消息。

我测试了两种方式，首先只上传 base64 中的裁剪图像 编码或在 blob 中作为文件附加到 formData 但在两种方式上错误都没有解决。

我也尝试上传图片，但有时会出现错误，有时不会。

如果使用cropper adjust 则发生错误（这是我的假设）

我的js代码提交表单

function addFile() 
 $("#result").html("");
 var myForm = $('#mainForm');
 var formData = new FormData(myForm[0]);

 $.ajax(
    url: "action.php", // Url to which the request is send
    type: "POST", // Type of request to be send, called as method
    data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
    contentType: false, // The content type used when sending data to the server.
    cache: false, // To unable request pages to be cached
    processData: false, // To send DOMDocument or non processed data file it is set to false
    dataType: "json",
    success: function (data)            // A function to be called if request succeeds
    
        $("#result").html(data.response + " : " + data.message);
    ,
    error: function (res) 
        $("#result").html(res.responseText);
    
 );
 return false;

我的操作 php 代码

    <?php

    $uploadThumbnailPath    = "dir";
    $thumbImgData           = $_POST['thumbImg'];

    $numberOfImages = 1;

    $isImageUploaded = 0;
    if ($thumbImgData != "") 
        //thumbnail image uploading code
        list($type, $thumbImgData) = explode(';', $thumbImgData);
        list(, $thumbImgData) = explode(',', $thumbImgData);
        $thumbImgData = base64_decode($thumbImgData);

        $myTimeStamp      = "thumbImg_" . time() . uniqid();
        $displayImageName = $myTimeStamp . ".png";
        $dir              = $uploadThumbnailPath;
        if (file_put_contents("$dir/$displayImageName", $thumbImgData)) 
            $jpgFormatImageName = $myTimeStamp . ".jpg";
            convertPNGtoJPG("$dir/$displayImageName", "$dir/$jpgFormatImageName", 238, 238, 238, 1);
            if (file_exists("$dir/$displayImageName")) 
                unlink("$dir/$displayImageName");
            
            $isImageUploaded = 1;
        
     else 
        $arrayResponse = array("response" => "thumbImg_BLANK", "message" => 'thumbImg_BLANK');
        echo json_encode($arrayResponse);
        exit;
    


    for ($i = 1; $i <= $numberOfImages; $i++) 

        if (isset($_POST["imgName$i"])) 
            $itemImagesName = "";
         else 
            $itemImagesName = $_FILES["imgName$i"]['name'];
        
        if ($itemImagesName != "") 
            $extension                   = pathinfo($itemImagesName, PATHINFO_EXTENSION);
            $uploadNewFileNameWithoutExt = "image_" . md5($i . time());
            $uploadDirPath               = "dir/p/";

            $uploadNewFileName[$i]     = $uploadNewFileNameWithoutExt . '.' . $extension;
            $uploadNewFileWithPathName = $uploadDirPath . $uploadNewFileName[$i];
            $mesUpload                 = uploadImageFileOnServer("imgName$i", $allowedExts, $maxFileSize, $uploadNewFileWithPathName);
        
    

    $itemImages = implode("#:#", $uploadNewFileName);

    $thumbnailImageName = "default_thumbnail.png";
    if ($isImageUploaded == 1) 
        $thumbnailImageName = $jpgFormatImageName;
    

    if ($mesUpload == "FILE_UPLOADED") 
        $arrayResponse = array("response" => "OK", "message" => "OK UPLOAD SUCCESS");
        echo json_encode($arrayResponse);
        exit;
     else 
        /* $mesUpload */
        $arrayResponse = array("response" => "FILE_FAILED", "message" => "FAIL TO UPLOAD");
        echo json_encode($arrayResponse);
        exit;
    
    ?>

这里是那个错误的截图 这是

screen shot 1

screen shot 2

请帮我解决这个问题。我对这个错误感到困惑，我没有任何想法来解决这个问题。 如果有人想使用我在网上上传示例代码，请单击下面的链接 https://tamapev.000webhostapp.com/upload-img/

【问题讨论】：

action.php 在哪里？在http://example.com/upload-img/action.php?

yes 操作位于 upload-img 文件夹中

使用 safari v9 版

【参考方案1】：

问题可能是您将表单数据发送到错误的页面，首先确定 action.php 是在根目录中还是在名为“upload-img”的目录中。然后将请求发送到给定的页面。

接下来对于“尝试加载资源时发生错误”的错误，要查看实际错误是什么，在您的第一个屏幕截图中，面板中有一个小按钮显示“响应”，单击它并更改它为“JSON”

如果“action.php”在“upload-img”中，则需要更改

url: "action.php", 到 url: "/upload-img/action.php",

【讨论】：

它无法正常工作，但在 safari 上发生了同样的错误。在其他浏览器上测试工作正常。并且面板中没有显示“响应”且未找到 JSON 的小按钮