我正在尝试将图像上传到临时文件夹，并将上传的图像显示给用户。
图像会上传到临时文件夹，但图像不会显示给用户。我宁愿得到一条upload_complete消息，其中应该显示图像。
请问我有什么问题吗？
的Javascript
<script>
var hasImage = "";
window.onbeforeunload = function() {
if (hasImage != "") {
return "You have not posted your image";
}
}
function showBtnDiv() {
_("statustext").style.height = "80px";
_("btns_SP").style.display = "block";
}
function doUpload(id) {
// www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
var file = _(id).files[0];
if (file.name == "") {
return false;
}
if (file.type != "image/jpeg" && file.type != "image/gif") {
alert("That file type is not supported.");
return false;
}
_("triggerBtn_SP").style.display = "none";
_("uploadDisplay_SP").innerHTML = "Image uploading......";
var formdata = new FormData();
formdata.append("stPic", file);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "php_parsers/photo_system.php");
ajax.send(formdata);
}
function completeHandler(event) {
var data = event.target.responseText;
var datArray = data.split("|");
if (datArray[0] == "upload_complete") {
hasImage = datArray[1];
_("uploadDisplay_SP").innerHTML = '<img src="tempUploads/' + datArray[1] + '" class="statusImage" />';
} else {
_("uploadDisplay_SP").innerHTML = datArray[0];
_("triggerBtn_SP").style.display = "block";
}
}
function errorHandler(event) {
_("uploadDisplay_SP").innerHTML = "Upload Failed";
_("triggerBtn_SP").style.display = "block";
}
function abortHandler(event) {
_("uploadDisplay_SP").innerHTML = "Upload Aborted";
_("triggerBtn_SP").style.display = "block";
}
function triggerUpload(e, elem) {
e.preventDefault();
_(elem).click();
}
function postToStatus(action, type, user, ta) {
var data = _(ta).value;
if (data == "" && hasImage == "") {
alert("Type something first weenis");
return false;
}
var data2 = "";
if (data != "") {
data2 = data.replace(/</g, "<").replace(/>/g, ">").replace(/n/g, "<br />").replace(/r/g, "<br />");
}
if (data2 == "" && hasImage != "") {
data = "||na||";
data2 = '<img src="permUploads/' + hasImage + '" />';
} else if (data2 != "" && hasImage != "") {
data2 += '<br /><img src="permUploads/' + hasImage + '" />';
} else {
hasImage = "na";
}
_("statusBtn").disabled = true;
var ajax = ajaxObj("POST", "php_parsers/status_system.php");
ajax.onreadystatechange = function() {
if (ajaxReturn(ajax) == true) {
var datArray = ajax.responseText.split("|");
if (datArray[0] == "post_ok") {
var sid = datArray[1];
var currentHTML = _("statusarea").innerHTML;
_("statusarea").innerHTML = '<div id="status_' + sid + '" class="card"><div class="card-profile-title"><div class="row"><div class="col s1"><img src="images/yuna.jpg" alt="" class="circle responsive-img valign profile-post-uer-image"></div><div class="col s10"><p class="grey-text text-darken-4 margin"><a href="#" >Posted by you just now:</a></p><span class="grey-text text-darken-1 ultra-small">Shared - Just now</span></div><a href="#" onmousedown="deleteStatus(\'' + sid + '\',\'status_' + sid + '\');"><i class="mdi-action-delete small tooltipped" data-tooltip="delete this post" data-position="top"></i></a></div></div><div class="card-image profile-medium"><img src="images/gallary/33.jpg" alt="sample" class="responsive-img profile-post-image profile-medium activator"></div><div class="card-content"><p>' + data2 + '</p></div><ul class="card-action-buttons"><li><a class="btn-floating waves-effect waves-light green accent-4 tooltipped activator right" data-tooltip="comment" data-position="top"><i class="mdi-editor-mode-comment"></i></a></li></ul><div class="card-reveal"><span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i></span><div class="row"><div class="col s2"><img src="images/yuna.jpg" alt="" class="circle responsive-img valign profile-post-uer-image"></div><div class="col s8"><p>' + data2 + '</p><div class="grey-text text-darken-1 ultra-small right">Just now</div></div></div><div class="row"><div class="input-field col s8 margin"><input id="replytext_' + sid + '" onkeyup="statusMax(this,250)" type="text" class="validate margin"><label for="replytext_' + sid + '">Comment</label></div><i id="replyBtn_' + sid + '" onclick="replyToStatus(' + sid + ',\'<?php echo $u; ?>\',\'replytext_' + sid + '\',this)" class="mdi-content-send small right"></i></div><div id="statuss_' + sid + '"></div></div></div>' + currentHTML;
_("statusBtn").disabled = false;
_(ta).value = "";
_("triggerBtn_SP").style.display = "block";
_("btns_SP").style.display = "none";
_("uploadDisplay_SP").innerHTML = "";
_("statustext").style.height = "20px";
_("fu_SP").value = "";
hasImage = "";
$('#post').closeModal();
} else {
alert(ajax.responseText);
}
}
}
ajax.send("action=" + action + "&type=" + type + "&user=" + user + "&data=" + data + "&image=" + hasImage);
}
</script>
CSS
.hiddenStuff{
display: none;
}
.triggerBtn{
float:right;
cursor:pointer;
margin-right: 500px;
}
img.statusImage{
max-width: 200px;
}
HTML
<div id="wrap" >
<div id="left"><div class="fullwidth" id="uploadDisplay_SP"></div></div>
<div id="right"><textarea id="statustext" onkeyup="statusMax(this,250)" onfocus="showBtnDiv()" class="boxsizingBorder" placeholder="Write something and add a image to your post"></textarea>
<div id="btns_SP" class="hiddenStuff">
<button id="statusBtn" class="pull-right cenbtn btn btn-sm waves-effect waves-light" onclick="postToStatus('status_post','a','.$u.','statustext')">Post</button>
<img src="images/camera.jpg" id="triggerBtn_SP" class="triggerBtn" required="required" onclick="triggerUpload(event, 'fu_SP')" width="24" height="24" title="Upload A Selfie" />
</div>
<div id="standardUpload" class="hiddenStuff">
<form id="image_SP" required="required" enctype="multipart/form-data" method="post">
<input type="file" required="required" name="FileUpload" id="fu_SP" onchange="doUpload('fu_SP')"/>
</form>
</div>
</div> </div>
photo_system.php
if (isset($_FILES["stPic"]["name"]) && $_FILES["stPic"]["tmp_name"] != ""){
$fileName = $_FILES["stPic"]["name"];
$fileTmpLoc = $_FILES["stPic"]["tmp_name"];
$fileType = $_FILES["stPic"]["type"];
$fileSize = $_FILES["stPic"]["size"];
$fileErrorMsg = $_FILES["stPic"]["error"];
$kaboom = explode(".", $fileName);
$fileExt = end($kaboom);
list($width, $height) = getimagesize($fileTmpLoc);
if($width < 10 || $height < 10){
echo"Image is too small|fail";
exit();
}
$time = time();
$db_file_name = $log_username.time().".".$fileExt;
if($fileSize > 4096000) {
echo "Your image file was larger than 4mb fail";
exit();
} else if (!preg_match("/.(gif|jpg|png)$/i", $fileName) ) {
echo "Your image file was not jpg, gif or png type|fail";
exit();
} else if ($fileErrorMsg == 1) {
echo "An unknown error occurred|fail";
exit();
}
if(move_uploaded_file($fileTmpLoc, "../tempUploads/$db_file_name")){
echo "upload_complete|$db_file_name";
} else {
echo "move_uploaded_file function failed";
}
}
答案 0 :(得分：0)
如果您在显示屏上打印的是单词而不是图像，则表示您的代码符合以下行：
else {
_("uploadDisplay_SP").innerHTML = datArray[0]; // this line is hit
//.....
}
这意味着此测试的响应失败：
if (datArray[0] == "upload_complete") ....
由于您在显示屏上看到upload_complete字样，我可以看到的唯一可能原因是您的响应在开头有一些胭脂空白。 See this test that shows such behaviour
请记住，响应文本将是您的脚本输出的所有内容，因此如果您有类似echo和＃34; ＆＃34 ;;在线之前的某个地方，它会在回报中给它一个空格
为避免这种情况，您可以在字符串上调用trim或使用如下的正则表达式：
function completeHandler(event) {
var data = event.target.responseText;
if (data.match(/upload_complete\|(.+)/)) {
hasImage = data.match(/upload_complete\|(.+)/)[1];
_("uploadDisplay_SP").innerHTML = '<img src="tempUploads/' +hasImage+ '" class="statusImage" />';
} else {
_("uploadDisplay_SP").innerHTML = data;
_("triggerBtn_SP").style.display = "block";
}
}