Javascript 使用ajax上传图像并显示给用户
我正在尝试将图像上载到临时文件夹,并将上载的图像显示给用户 图像确实上载到临时文件夹,但图像不会显示给用户。我宁愿得到一个上传完整的信息,图像应该显示在那里 我做错了什么,能帮忙吗 JavascriptJavascript 使用ajax上传图像并显示给用户,javascript,php,jquery,css,ajax,Javascript,Php,Jquery,Css,Ajax,我正在尝试将图像上载到临时文件夹,并将上载的图像显示给用户 图像确实上载到临时文件夹,但图像不会显示给用户。我宁愿得到一个上传完整的信息,图像应该显示在那里 我做错了什么,能帮忙吗 Javascript <script> var hasImage = ""; window.onbeforeunload = function() { if (hasImage != "") { return "
<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>
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";
}
}
if(isset($\u文件[“stPic”][“名称”])&&$\u文件[“stPic”][“tmp\u名称”!=”){
$fileName=$_文件[“stPic”][“name”];
$fileTmpLoc=$_文件[“stPic”][“tmp_名称”];
$fileType=$_文件[“stPic”][“type”];
$fileSize=$_文件[“stPic”][“大小”];
$fileErrorMsg=$_文件[“stPic”][“错误”];
$kaboom=explode(“.”,$fileName);
$fileExt=end($kaboom);
列表($width,$height)=getimagesize($fileTmpLoc);
如果($width<10 | |$height<10){
回波“图像太小|失败”;
退出();
}
$time=time();
$db_file_name=$log_username.time().“.”$fileExt;
如果($fileSize>4096000){
echo“您的图像文件大于4mb失败”;
退出();
}如果(!preg_match(“/(gif | jpg | png)$/i“,$fileName)){
echo“您的图像文件不是jpg、gif或png类型|失败”;
退出();
}else if($fileErrorMsg==1){
echo“出现未知错误|失败”;
退出();
}
如果(移动上传的文件($fileTmpLoc,“../temuploads/$db\u文件名”)){
echo“上传完成|$db_文件名”;
}否则{
echo“移动上传文件功能失败”;
}
}
如果您将文字打印到显示器上而不是图像上,则表示您的代码击中了以下行:
else {
_("uploadDisplay_SP").innerHTML = datArray[0]; // this line is hit
//.....
}
这意味着响应未通过此测试:
if(datArray[0]=“上传完成”)..
由于您在显示器上看到单词upload\u complete
,因此我能看到的唯一可能原因是您的回答在开头有一些胭脂空白
请记住,响应文本将是脚本输出的所有内容,因此如果您有类似echo“”的内容;在这条线之前的某个地方,这会给它一个返回的空间
为了避免这种情况,可以对字符串调用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";
}
}
函数completeHandler(事件){
var data=event.target.responseText;
if(data.match(/upload_complete\|(.+)/){
hasImage=data.match(/upload_complete\|(.+)/)[1];
_(“uploadDisplay_SP”).innerHTML='';
}否则{
_(“uploadDisplay_SP”).innerHTML=数据;
_(“triggerBtn_SP”).style.display=“块”;
}
}
什么是echo“上传完成|$db_文件名”代码>准确吗?你的意思是echo$db\u文件名代码>?请检查此链接。@bleeted0d echo“上传完成|$db_文件名”;返回javascript,javascript在echo中查找upload_complete,如果发现它应该显示上传的图像,您是否检查了ajax请求返回的内容?是否有任何警告或错误?您可以使用输出缓冲来确保响应不受任何干扰,因为您依赖的格式正是您所期望的格式。调用var data=event.target.responseText代码>?是上传完成吗|
?这很好用,先生感谢JSFIDLE的帮助非常感谢
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";
}
}