我正在尝试使用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。 上传图片的代码是在文件输入的更改事件上完成的。
这是接收页面的相关代码。
$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：他给了我边缘的版本号，但我仍然没有复制这个bug。我假设我正在为版本错误地执行用户代理字符串。它是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。这是我的客户使用的边缘版本，但它仍能正常工作。
答案 0 :(得分：0)
周六我的客户给我发了电子邮件说它突然起作用了。我不太确定为什么在他尝试过的其他时间里它都不起作用，但它现在适用于他。谢谢你的帮助。希望我得出一个令人满意的结论。