在所见即所得编辑器中上传和显示图像答案

【问题标题】：Upload and Display Image in WYSIWYG Editor在所见即所得编辑器中上传和显示图像
【发布时间】：2023-03-31 04:45:02
【问题描述】：

更新（2018 年 6 月 22 日）

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

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

【问题讨论】：

你试过了吗？ stackoverflow.com/questions/941206/… 运气好吗？如果图像通过 AJAX 成功上传，那么我认为您需要做的只是将其附加到您当前的 div 中。
我已将代码更新为使用 prepend 方法。但是，当我将文件作为图像添加时，会出现一个带有白色问号的蓝色方块。

标签： javascript html editor wysiwyg

【解决方案1】：

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

所以，我的逻辑如下。

用户选择一个图像文件并点击Upload。
文件通过 JS 的 FormData 通过 AJAX 提交到服务器。
文件经过验证并移至所需位置。
文件上传成功后，服务器会返回一个 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，任何服务器端技术都可以处理，没有任何问题），以便您了解如何创建响应.

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

【讨论】：