Загрузить изображение с помощью ajax и показать пользователю

Question

Я пытаюсь загрузить изображение в папку temp и отобразить загруженное изображение пользователю.

Изображение загружается во временную папку, но изображение не отображается пользователю. Я скорее получаю сообщение 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, "&lt;").replace(/>/g, "&gt;").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> 

фо to_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"; 
    } 
} 

Answer 1

Если вы получаете слова, напечатанные на дисплее вместо изображения, то это означает, что ваш код удара следующую строку:

 else { 
      _("uploadDisplay_SP").innerHTML = datArray[0]; // this line is hit 
      //..... 
     } 

это означает, что ответ не удалось это испытание :

if (datArray[0] == "upload_complete") ....

Поскольку вы видите слова upload_complete на дисплее, только возможная причина, по которой я вижу, в том, что в вашем ответе вначале есть пустые пробелы. See this test that shows such behaviour

Помните, что в тексте ответа будет отображаться все ваши сценарии, если у вас есть что-то вроде эха ""; где-то до линии, что даст ему место в возвращении

, чтобы избежать этого, вы могли бы назвать дифферент на струне или использовать регулярное выражение как это:

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"; 
      } 
}