个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试使用 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 或 Edge 上运行时，它不会上传。
更新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 版本更旧的版本，但它仍然工作正常。
最佳答案
昨天，我的客户给我发电子邮件说它突然起作用了。我不太确定为什么他尝试过的所有其他时间都不起作用，但现在对他有用。谢谢你们的帮助。但愿我能得出一个令人满意的结论。
关于javascript - JQuery Ajax 文件上传在客户端浏览器上无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45624074/
26
4
0
我有以下正则表达式 /[a-zA-Z0-9_-]/ 当字符串只包含从 a 到z 大小写、数字、_ 和 -。 我的代码有什么问题？ 能否请您向我提供一个简短的解释和有关如何修复它的代码示例？ //var
我是一名优秀的程序员,十分优秀！