javascript - 使用ajax上传图片并显示给用户

Question

我正在尝试将图像上传到临时文件夹并将上传的图像显示给用户。

图像会上传到临时文件夹，但不会向用户显示。我宁愿在应该显示图像的地方收到一条 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>

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

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

请记住，响应文本将是您的脚本输出的所有内容，因此如果您有类似 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";
            }
}