Question

UPDATE（6/22/2018）

我已经编写了一个所见即所得的编辑器。输入文本的区域只是一个内容可编辑的div。我在使用图片/上传/文件上传按钮时遇到了问题。我希望“选择文件”按钮在上传时以可编辑的内容显示视频/图像。但是，我不希望上载将图像/视频/文件存储在数据库中。基本上，我希望在插入图像/视频时，图像/视频将显示在可编辑的内容中。（更新：当我上传图像/视频时，对于该图像，显示带有白色问号的蓝色方块，对于该视频，则没有显示任何东西，除了将所有其他元素都移位了，就像实际插入了一个元素一样。） / p>

HTML：

 <form id = "upload_form" enctype = "multipart/form-data" method = "post"></form>
                                <input type = "file" name = "file1" id = "file1"><br>
                                <input type = "button" value = "Upload File" onclick = "uploadFile()">
                                <progress id = "progressBar" value = "0" max = "100" style = "width: 300px;"></progress>
                                <h3 id = "status"></h3>
                                <p id = "loaded_n_total"></p>

Javascript：

function _(el){
    return document.getElementById(el);
}

   function uploadFile(){
    var file = _("file1").files[0];
    //Added
    var fileType = _("file1").files[0]['type'];
    if(fileType.split('/')[0] == 'image'){
        alert("Image");
        $('#editor').prepend('<img src= file />')
    }
    else if(fileType.split('/')[0] == 'video'){
        alert("Video");
        $('#editor').prepend('<video><source src=file type="video/mp4"></video>');
    }

    //End of Added
    //alert(file.name + " | " + file.size + " | " + file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send();
}

function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent); + "% uploaded ... please wait";
}

function completeHandler(event) {
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}

function errorHandler(event) {
    _("status").innerHTML = "Uploaded Failed";
}

function abortHandler(event) {
    _("status").innerHTML = "Uploaded Aborted";
}

Answer 1

我无法创建Minimal, Complete and Verifiable Example。下次，请尝试提供一个根据您的问题创建的解决方案。由于无法以此创建一个，因此我自由地创建了自己的一个。请记住，这是一个非常生锈的示例，在将其放入代码之前，您需要进行一些补充。

所以，我的逻辑如下。

用户选择一个图像文件，然后单击Upload。
文件通过AJAX通过JS的FormData提交到服务器。
文件已验证并移至所需位置。
文件成功上传后，服务器将响应一个JSON对象，指示成功状态以及刚刚上传的文件的相对路径。
获取文件路径并创建HTML img标签。
将img标签附加到所需的div。

用于处理文件上传和添加的JS代码（wys_home.php）

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="file" name="img" id="img" />
        <input type="button" id="btnUpload" name="btnUpload" value="Upload">
        <div id="editor"></div>
    </body>
    <script>
        $(document).ready(function(){
            $(document).on("click", "#btnUpload", function(){
                var fd = new FormData();
                fd.append("img", document.getElementById("img").files[0]);
                fd.append("submit", true);
                $.ajax({
                    url: 'wys_img.php',
                    data: fd,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType:"JSON",
                    success: function(data){
                        console.log(data);
                        if(data.success){
                            //Successfully uploaded
                            var img = document.createElement("img"); // Create a new image element
                            img.setAttribute("src", data.path); // Set the src attribute to the reference of the newly uploaded image. Note that we are referring to the uploaded image in our server
                            $("#editor").append(img); // Append the image element
                        }
                    }
                });
            });
        });
    </script>
</html>

php代码，用于在后端（wys_img.php）处理上传的文件

<?php
    $response = ["success"=>false, "message"=>"Bad request"];
    if(isset($_POST["submit"])) {
        $response["message"] ="Unknown error occurred";
        $target_dir = "uploads/";
        $target_file = $target_dir . basename($_FILES["img"]["name"]);
        $uploadOk = 1;
        $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
        // Check if image file is a actual image or fake image

            $check = getimagesize($_FILES["img"]["tmp_name"]);
            if($check !== false) {
                $response["message"] = "File is an image - " . $check["mime"] . ".";
                $uploadOk = 1;
            } else {
                $response["message"] = "File is not an image.";
                $uploadOk = 0;
            }

        // Check if file already exists
        if (file_exists($target_file)) {
            $response["message"] = "Sorry, file already exists.";
            $uploadOk = 0;
        }
        // Check file size
        if ($_FILES["img"]["size"] > 500000) {
            $response["message"] = "Sorry, your file is too large.";
            $uploadOk = 0;
        }
        // Allow certain file formats
        if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
        && $imageFileType != "gif" ) {
            $response["message"] = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
            $uploadOk = 0;
        }
        // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
            $response["message"] = "Sorry, your file was not uploaded.";
        // if everything is ok, try to upload file
        } else {
            if (move_uploaded_file($_FILES["img"]["tmp_name"], $target_file)) {
                $response["message"] = "The file ". basename( $_FILES["img"]["name"]). " has been uploaded.";
                $response["success"] = true;
                $response["path"] = $target_file;
            } else {
                $response["message"] = "Sorry, there was an error uploading your file.";
            }
        }
    }
    echo json_encode($response);
?>

我包含了我用来处理上传文件的完整的php脚本（不一定需要是php，任何服务器端技术都可以解决这个问题，没有任何问题），以帮助您了解如何创建响应

同样，请注意，这是一个非常简单但实用的示例，可以实现您的意图。

在所见即所得编辑器中上载和显示图像

1 个答案: