使用ajax上传图像并显示给用户
Upload image with ajax and display to user
我正在尝试将图像上传到临时文件夹,并将上传的图像显示给用户。
图像确实上传到临时文件夹,但图像不会显示给用户。我宁愿在应该显示图像的地方得到一条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";
}
}
如果您在显示器上打印的是单词而不是图像,则表示您的代码正在命中以下行:
else {
_("uploadDisplay_SP").innerHTML = datArray[0]; // this line is hit
//.....
}
这意味着响应未通过此测试:
if (datArray[0] == "upload_complete") ....
由于您在显示器上看到了单词upload_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";
}
}
相关文章:
- 显示某个用户ID的某个标签的30张Instagram图片
- JavaScript:为什么不't将背景变化发送给用户's选择(简单)
- 正在给用户第二次尝试
- 在聊天应用程序中显示联机用户
- 如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中,并显示提示用户这样做的警报
- 使用 jQuery 加载 JSON,然后将其显示给查看器
- 读取一个本地文件,编码为base64,我想给用户一个将结果保存到文件的选项
- Ajax/php创建了一个数组——如何以.txt的形式下载给用户
- JavaScript/Wicket:如何显示阻止用户交互的覆盖
- 如何在AngularJS中显示具有用户身份验证的按钮
- 谷歌地图:使用自定义标记显示当前用户位置
- 在页面显示给用户之前拦截并修改DOM
- Chrome扩展,可以自动提取一些数据并将其显示给用户
- 使用ajax上传图像并显示给用户
- 是用户输入的带有Javascript的HTML显示给其他人,而不是HTML转义的XSS示例
- 如何显示“;用户正在键入"发送给另一用户
- 获取html元素显示给用户的内容
- 等待元素显示给用户
- 如何隐藏/删除错误信息后显示它给用户后几秒钟在javascript
- 将数据库中的数据显示给特定用户(使用角色?)