jQuery Ajax文件上传在客户端浏览器上无法正常工作 - javascript

我正在尝试使用Ajax和JQuery实现个人资料图片上传功能

我能够将个人资料图片成功上传到我尝试过的所有机器和移动设备上的数据库中。它适用于我在Chrome,Edge,Firefox,Safari甚至Vivaldi上使用。

问题是我住在加拿大的客户无法将他们的个人资料图片上传到数据库。另外,纵向宽高比的图像倾向于向侧面旋转。我一直在要求他重​​新注册并多次提供控制台日志,因为我无法重新创建此错误。

在个人资料选择页面上,我有

<!DOCTYPE html>
<?php
require "components.php";
error_reporting(E_ALL);
?>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta name="google-signin-client_id" content="766549190582-hnm635v8fd6oaa60nh5tvgpdihrvf922.apps.googleusercontent.com">


    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />

    <link rel='stylesheet' href='./css/carousel.css' >

    <link rel='stylesheet' href='./css/visio-theme.css' >

    <link rel='stylesheet' href='./css/navbar.css'>

    <link rel='stylesheet' href='./css/font-awesome.css'>

    <?php echo bootstrap_head(); ?>

</head>
<style>
    a {
        -webkit-transition: .25s all;
        transition: .25s all;
    }
    .card {
        overflow: hidden;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        -webkit-transition: .25s box-shadow;
        transition: .25s box-shadow;
    }
    .card:focus, .card:hover {
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }
    .card-inverse .card-img-overlay {
        background-color: rgba(51, 51, 51, 0.85);
        border-color: rgba(51, 51, 51, 0.85);
    }
</style>
<body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
    var $i = jQuery.noConflict();
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var $ = jQuery.noConflict();
</script>

<?php
    echo bootstrap_js();
    echo navbar();
?>
<script>

    var id_token;
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    $(document).ready(function() {
        $('#register').click(function() {
            $("#idtoken").val(id_token);
        });
    });

    function submit() {
        // send via XHR - look ma, no headers being set!
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            alert(xhr.responseText);
        };
        xhr.open("post", "./profile.php", true);
    }

    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                var image = new Image;
                image.onload = function () {
                    $('#pic').attr('src', e.target.result);
                };
                image.src = reader.result;
            };

            reader.readAsDataURL(input.files[0]);
        }
    }


    function getImage() {
        var reader = new FileReader();
    }

    function getuser(id, gUser) {
        $(document).ready(function() {
            // make a page call to adduser.php
            var profile = gUser.getBasicProfile();
            $("#pic").attr({
                src: profile.getImageUrl()
            });
            $('#name').html(profile.getName());
        })
    }

    function getMatchingSpecialties() {
    }

    function onSignIn(googleUser){
        id_token = googleUser.getAuthResponse().id_token;
        getuser(id_token, googleUser);
        $(document).ready(function() {
            $.ajax({
                method: 'POST',
                data: 'idtoken=' + id_token,
                url: 'https://haydenszymanski.me/Visio/php/getmember.php',
                success: function(result) {
                    $('#pic').attr({
                        src: "data:" + result.member_picture_type + ";base64, " + result.member_picture
                    });
                    $('#city').attr({
                        value: result.member_city
                    });
                    $('#country').val(result.member_country);
                    $('#sel1').val(result.member_profession);
                },
                dataType: 'json'
            });
        });
    }

    function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
            console.log('User signed out.');
        });
    }


</script>

<div class="container-fluid">
    <br />
    <div class="row">

        <div class="col-3">
        </div>
        <div class="col-6 card">
            <form role="form" action="profile.php" id="newForm" runat="server" method="post" >
                <div class="form-group">
                    <div class="container">
                        <h1 id="name"></h1>
                        <br />
                        <p>Profile Picture</p>
                        <img src="" id='pic' class="img-thumbnail" alt="profile picture" height="150" width="150"/>
                        <input type="file" id="filesys" value="userfile"/>

                    </div>
                </div>

                <div class="form-inline">
                    <div class="form-group" style="margin-right: 20px">
                        <input type="text" id='city' class="form-control" placeholder="City" name="city" required>
                    </div>

                    <div class="form-group">
                        <div class="form-group">
                            <select name="country" class="form-control" required >
                            <option value="" selected="selected">Country</option>
                            <option value="Afghanistan">Afghanistan</option>
                            <option value="Albania">Albania</option>
                            <option value="Algeria">Algeria</option>
                            <option value="American Samoa">American Samoa</option>
                            <option value="Andorra">Andorra</option>
                            <option value="Angola">Angola</option>

                            <option value="Guinea">Guinea</option>
                            <option value="Guinea-Bissau">Guinea-Bissau</option>
                            <option value="Guyana">Guyana</option>
                            <option value="Haiti">Haiti</option>
                            <option value="Heard and McDonald Islands">Heard and Mc Donald Islands</option>
                            <option value="Holy See">Holy See (Vatican City State)</option>
                            <option value="Honduras">Honduras</option>
                            <option value="Hong Kong">Hong Kong</option>
                            <option value="Hungary">Hungary</option>
                            <option value="Iceland">Iceland</option>
                            <option value="India">India</option>
                            <option value="Indonesia">Indonesia</option>
                            <option value="Iran">Iran (Islamic Republic of)</option>
                            <option value="Iraq">Iraq</option>
                            <option value="Ireland">Ireland</option>
                            <option value="Israel">Israel</option>
                            <option value="Italy">Italy</option>
                            <option value="Jamaica">Jamaica</option>
                            <option value="Japan">Japan</option>
                            <option value="Jordan">Jordan</option>
                            <option value="Kazakhstan">Kazakhstan</option>
                            <option value="Kenya">Kenya</option>
                            <option value="Kiribati">Kiribati</option>
                            <option value="Democratic People's Republic of Korea">Korea, Democratic People's Republic of</option>
                            <option value="Korea">Korea, Republic of</option>
                            <option value="Kuwait">Kuwait</option>
                            <option value="Kyrgyzstan">Kyrgyzstan</option>
                            <option value="Lao">Lao People's Democratic Republic</option>
                            <option value="Latvia">Latvia</option>
                            <option value="Lebanon">Lebanon</option>
                            <option value="Lesotho">Lesotho</option>
                            <option value="Liberia">Liberia</option>
                            <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                            <option value="Liechtenstein">Liechtenstein</option>
                            <option value="Lithuania">Lithuania</option>
                            <option value="Luxembourg">Luxembourg</option>
                            <option value="Macau">Macau</option>
                            <option value="Macedonia">Macedonia, The Former Yugoslav Republic of</option>
                            <option value="Madagascar">Madagascar</option>
                            <option value="Malawi">Malawi</option>
                            <option value="Malaysia">Malaysia</option>
                            <option value="Maldives">Maldives</option>
                            <option value="Mali">Mali</option>
                            <option value="Malta">Malta</option>
                            <option value="Marshall Islands">Marshall Islands</option>
                            <option value="Martinique">Martinique</option>
                            <option value="Mauritania">Mauritania</option>
                            <option value="Mauritius">Mauritius</option>
                            <option value="Mayotte">Mayotte</option>
                            <option value="Mexico">Mexico</option>
                            <option value="Micronesia">Micronesia, Federated States of</option>
                            <option value="Moldova">Moldova, Republic of</option>
                            <option value="Monaco">Monaco</option>
                            <option value="Mongolia">Mongolia</option>
                            <option value="Montserrat">Montserrat</option>
                            <option value="Morocco">Morocco</option>
                            <option value="Mozambique">Mozambique</option>
                            <option value="Myanmar">Myanmar</option>
                            <option value="Namibia">Namibia</option>
                            <option value="Nauru">Nauru</option>
                            <option value="Nepal">Nepal</option>
                            <option value="Netherlands">Netherlands</option>
                            <option value="Netherlands Antilles">Netherlands Antilles</option>
                            <option value="New Caledonia">New Caledonia</option>
                            <option value="New Zealand">New Zealand</option>
                            <option value="Nicaragua">Nicaragua</option>
                            <option value="Niger">Niger</option>
                            <option value="Nigeria">Nigeria</option>
                            <option value="Niue">Niue</option>
                            <option value="Norfolk Island">Norfolk Island</option>
                            <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                            <option value="Norway">Norway</option>
                            <option value="Oman">Oman</option>
                            <option value="Pakistan">Pakistan</option>
                            <option value="Palau">Palau</option>
                            <option value="Panama">Panama</option>
                            <option value="Papua New Guinea">Papua New Guinea</option>
                            <option value="Paraguay">Paraguay</option>
                            <option value="Peru">Peru</option>
                            <option value="Philippines">Philippines</option>
                            <option value="Pitcairn">Pitcairn</option>
                            <option value="Poland">Poland</option>
                            <option value="Portugal">Portugal</option>
                            <option value="Puerto Rico">Puerto Rico</option>
                            <option value="Qatar">Qatar</option>
                            <option value="Reunion">Reunion</option>
                            <option value="Romania">Romania</option>
                            <option value="Russia">Russian Federation</option>
                            <option value="Rwanda">Rwanda</option>
                            <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                            <option value="Saint LUCIA">Saint LUCIA</option>
                            <option value="Saint Vincent">Saint Vincent and the Grenadines</option>
                            <option value="Samoa">Samoa</option>
                            <option value="San Marino">San Marino</option>
                            <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                            <option value="Saudi Arabia">Saudi Arabia</option>
                            <option value="Senegal">Senegal</option>
                            <option value="Seychelles">Seychelles</option>
                            <option value="Sierra">Sierra Leone</option>
                            <option value="Singapore">Singapore</option>
                            <option value="Slovakia">Slovakia (Slovak Republic)</option>
                            <option value="Slovenia">Slovenia</option>
                            <option value="Solomon Islands">Solomon Islands</option>
                            <option value="Somalia">Somalia</option>
                            <option value="South Africa">South Africa</option>
                            <option value="South Georgia">South Georgia and the South Sandwich Islands</option>
                            <option value="Span">Spain</option>
                            <option value="SriLanka">Sri Lanka</option>
                            <option value="St. Helena">St. Helena</option>
                            <option value="St. Pierre and Miguelon">St. Pierre and Miquelon</option>
                            <option value="Sudan">Sudan</option>
                            <option value="Suriname">Suriname</option>
                            <option value="Svalbard">Svalbard and Jan Mayen Islands</option>
                            <option value="Swaziland">Swaziland</option>
                            <option value="Sweden">Sweden</option>
                            <option value="Switzerland">Switzerland</option>
                            <option value="Syria">Syrian Arab Republic</option>
                            <option value="Taiwan">Taiwan, Province of China</option>
                            <option value="Tajikistan">Tajikistan</option>
                            <option value="Tanzania">Tanzania, United Republic of</option>
                            <option value="Thailand">Thailand</option>
                            <option value="Togo">Togo</option>
                            <option value="Tokelau">Tokelau</option>
                            <option value="Tonga">Tonga</option>
                            <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                            <option value="Tunisia">Tunisia</option>
                            <option value="Turkey">Turkey</option>
                            <option value="Turkmenistan">Turkmenistan</option>
                            <option value="Turks and Caicos">Turks and Caicos Islands</option>
                            <option value="Tuvalu">Tuvalu</option>
                            <option value="Uganda">Uganda</option>
                            <option value="Ukraine">Ukraine</option>
                            <option value="United Arab Emirates">United Arab Emirates</option>
                            <option value="United Kingdom">United Kingdom</option>
                            <option value="United States">United States</option>
                            <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
                            <option value="Uruguay">Uruguay</option>
                            <option value="Uzbekistan">Uzbekistan</option>
                            <option value="Vanuatu">Vanuatu</option>
                            <option value="Venezuela">Venezuela</option>
                            <option value="Vietnam">Viet Nam</option>
                            <option value="Virgin Islands (British)">Virgin Islands (British)</option>
                            <option value="Virgin Islands (U.S)">Virgin Islands (U.S.)</option>
                            <option value="Wallis and Futana Islands">Wallis and Futuna Islands</option>
                            <option value="Western Sahara">Western Sahara</option>
                            <option value="Yemen">Yemen</option>
                            <option value="Yugoslavia">Yugoslavia</option>
                            <option value="Zambia">Zambia</option>
                            <option value="Zimbabwe">Zimbabwe</option>
                        </select>
                       </div>
                    </div>

                </div>
                <div class="form-group">
                    <br />
                    <label for="sel1">Select Profession</label>
                    <select name="profession" class="form-control" id="sel1" required>
                        <option value="" selected>Profession</option>
                        <option value="optometrist">Optometrist</option>
                        <option value="ophthalmologist">Ophthalmologist</option>
                        <option value="family_physician">Family Physician</option>
                    </select>
                    <div style="margin-top: 20px; margin-bottom: 20px;">
                        <label>Enter some specializations</label>
                        <input type="text" class="form-control" id="demo-input" name="blah" />
                        <script type="text/javascript" src="src/jquery.tokeninput.js"></script>
                        <script>
                            $i(document).ready(function() {
                                $i("#demo-input").tokenInput("https://haydenszymanski.me/Visio/php/specialties.php", {theme: "facebook"});
                                $i("#demo-input").attr("class", "form-control");
                            });
                        </script>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" id="register" >Register</button>
                </div>
                <input id="idtoken" type="hidden" name="idtoken" value="k">


                <script>
                    var control = document.getElementById("filesys");
                    control.addEventListener("change", function(event) {
                        //$('#register').prop('disable', true);
                        $('#register').attr('disabled', 'disabled');
                        var file = control.files[0];
                        var fd = new FormData();
                        fd.append("image", file);
                        fd.append("idtoken", id_token);
                        $.ajax({
                            type: 'POST',
                            url: 'https://haydenszymanski.me/Visio/php/update_profile_picture.php',
                            data: fd,
                            processData: false,
                            contentType: false,
                            success: function() {
                                console.log("first test");
                            }
                        }).done(function(data) {
                            $("#register").removeAttr('disabled');
                            console.log("test");
                            console.log(data);
                        });

                    }, false);

                    $('#filesys').change(function() {
                        previewImage(this);
                    });
                </script>
            </form>
        </div>
    </div>
</div>
</div>
</form>
</body>

该ajax调用中的URL不是代码中的实际URL。上传图像的代码是在文件输入的change事件上完成的。这是接收页面的相关代码。

$client = new Google_Client(['client_id' => $CLIENT_ID]);
$payload = $client->verifyIdToken($id_token);
if ($payload) {
    $fileName = $_FILES['image']['name'];
    $tmpName  = $_FILES['image']['tmp_name'];
    $fileSize = $_FILES['image']['size'];
    $fileType = $_FILES['image']['type'];

    $id = $payload['sub'];

    echo update_profile_picture($id, $fileName, $tmpName, $fileType );
    //echo $img_info['content'];
}
else {
}

此代码使用此处显示的功能:

function update_profile_picture($id, $fileName, $tmpName, $fileType) {
        $conn = new mysqli($GLOBALS['servername'], $GLOBALS['username'], 
        $GLOBALS['password'], 'visio');
        if ($conn->connect_error) {
           die("$conn->connect_errno: $conn->connect_error");
        }

        $fp = fopen($tmpName, 'rb');
        $content = fread($fp, filesize($tmpName));
        fclose($fp);

        $sql = "UPDATE member SET member_picture = ?, member_picture_type = ? WHERE member_id = ?";

        $stmt = $conn->stmt_init();
        if ($stmt->prepare($sql)) {
            echo json_encode(array("Server" => array(
                "Filename" => $fileName,
                "Filetype" => $fileType,
                "Id" => $id
            )), JSON_PRETTY_PRINT);
            $stmt->bind_param("sss", $content, $fileType, $id);
            $stmt->execute();
        }
        else {
            echo "error with upload";
        }
        $stmt->close();
        $conn->close();
    }

让我感到困惑的是,我还为update_profile_picture函数设置了它以响应有关接收到的图片的信息,但是在我的客户端控制台日志的屏幕快照中,图像类型为“”,但是图像名称与应有的相同是。他的浏览器似乎没有提供接收页面的所有信息,因此他实际上无法将文件作为Blob上载到服务器。

更新:我已经看过其他线程,尽管有类似的问题要解决,但实际上对我有用。问题是当我的客户尝试使其在Firefox上运行时,它无法上载。

更新2:他给了我Edge的版本号,但是我仍然没有复制该错误。我假设我为版本错误地执行了用户代理字符串。它是Microsoft Edge 40.15063.0.0,Microsoft EdgeHTML 15.15063。

这是一个有效的用户代理字符串
Mozilla / 5.0(Windows NT 10.0; Win64; x64)AppleWebKit / 537.36(KHTML,如Gecko)Chrome / 51.0.2704.79 Safari / 537.36 Edge / 14.14393。它是我的客户端使用的Edge的较旧版本,但仍然可以正常工作。

参考方案

昨天,我的客户给我发了电子邮件,说它突然起作用。我不太确定为什么他尝试过的所有其他时间都不奏效,但现在对他有用。感谢您的帮助。希望我得出一个令人满意的结论。

故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php

我收到警告:session_start()[function.session-start]:无法发送会话缓存限制器-标头已发送(错误输出开始如果我将表单数据提交到其他文件进行处理,则可以正常工作。但是,如果我将表单数据提交到同一页面,则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…

在SELECT标记中搜索OPTION - javascript

我有一个中级的Web开发知识初学者,并且正在做一个网页,询问人们一些个人数据。这是关于失业的非正式研究。这是我托管page的地方(它是巴西葡萄牙语)。我已经从“乔布斯省”网站上获得了一份职业清单,并以此方式在SELECT字段中显示了该清单:<?php $ocupacoes = file('ocupacoes'); $options …

Div单击与单选按钮相同吗? - php

有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同?我只希望下面的div提交值,单选按钮很丑代码输出如下:<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…

使用php重新加载内容 - javascript

在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

AJAX调用只能与$(document).on('click')一起使用 - php

我有一个显示数据库条目的表。用户能够为每一行打开一个弹出菜单。选项之一是删除数据库条目,并且该表应通过AJAX调用相应地刷新。只要有人单击#delete-toggle中的table-popup,我就会在HTML页面上进行AJAX调用(table-popup是div,当有人单击每行中存在的表中的table-edit-button时出现的表): <div …