Wysihtml5：如何将插入的图像下载到服务器？答案

【问题标题】：Wysihtml5: How to download inserted image to server?Wysihtml5：如何将插入的图像下载到服务器？
【发布时间】：2017-07-16 16:48:54
【问题描述】：

我目前正在使用 Wysihtml5 HTML 文本编辑器。它运作良好。但现在我想将插入的图像存储在我的 Amazon S3 存储桶中。

当有人从 URL 插入图片时，该图片应该在我自己的服务器或存储桶上。

目前 Wysihtml5 编辑器通常保存图像源。看这里：http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/

当我按下插入图片时；

它应该将图像存储到我的服务器
然后它应该用我自己的服务器 url 路径替换图像的旧源 url

如何通过 Ajax 请求触发 插入图片按钮 进行图片下载？在实现此功能之前我应该采取哪些步骤？

【问题讨论】：

我检查过了，但它不能正常工作..嘿，你应该使用这个：bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg
我听不懂你@UmairShahYousafzai？你检查了什么不能正常工作？
我正在检查插入图像功能，但效果不佳..起初它无法从 https 链接以及带有额外参数的链接添加图像，然后当我将链接更改为http，所以只有一次它插入图像，然后当我删除图像并再次尝试时，它就不再添加插入图像了..！可能是某种错误......正如描述中所说，它不再被维护......！ :D
好的，谢谢您的关注。 @UmairShahYousafzai，你知道我的问题吗？
第二这只是一个基于JS 的前端编辑器..它没有任何上传功能...您需要在通过PHP 或其他任何方式提交时添加这些功能..！它只插入带有远程服务器 src 的图像，而不是将它们上传到服务器..！

标签： javascript jquery twitter-bootstrap image-upload wysihtml5

【解决方案1】：

您可以这样做：

看看链接：

粘贴基于事件的图片上传脚本： http://huntedhunter.com/uploadimage/

我刚刚写了这个......！

工作原理：

当有人在输入字段中粘贴 HTTP 站点图像链接时，图像 url 通过 ajax 发布请求文件发布到 upload.php，upload.php 文件下载图像并将其保存在本地服务器上，然后在对当前页面的 ajax 响应中接收到新的图像 url，因此您可以对响应执行任何操作..！

代码如下：

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$( document ).ready(function() {
$('#insert').on('input', function(e) {
   var $val = $('#insert').val();
   $.ajax({
       url: 'upload.php',
       type: 'POST',
       data: { imageurl: $val} ,
       success: function (response) {
           $('#newimageurl').val(response);
           $('#showimage').attr('src', response);
       },
       error: function () {
           //your error code
       }
   }); 
});
});
</script>
<title></title>
</head>
<body>
<form class="form-horizontal" style="padding: 10%">
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Insert Image: </label>
        <div class="col-sm-10">
            <input class="form-control" id="insert" placeholder="Enter ImageURL" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Your New Image URL:</label>
        <div class="col-sm-10">
            <input class="form-control" id="newimageurl" placeholder="Enter ImageURL" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Your New Image:</label>
        <div class="col-sm-10"><img id="showimage" src=""></div>
    </div>
</form>
</body>
</html>

PHP : (upload.php)

<?php
$image_name = basename($_POST["imageurl"]);
$ch = curl_init($_POST["imageurl"]);
$fp = fopen("tmp/$image_name", 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
$url = $_SERVER['REQUEST_URI']; //returns the current URL
$parts = explode('/', $url);
$dir = $_SERVER['SERVER_NAME'];

for ($i = 0; $i < count($parts) - 1; $i++)
    {
    $dir.= $parts[$i] . "/";
    }

echo "http://" . $dir . "tmp/" . $image_name;
?>

【讨论】：

这很酷。我可以做这部分，但我更大的问题是如何将此解决方案连接到 wysihtml？ :) 如果用户从文本编辑器中删除图像，会发生什么？
我刚刚为我的问题找到了解决方案：)
当用户从文本编辑器中删除图像时，您是否也希望能够删除图像？
现在很简单，您只需要提及编辑器输入 id 就可以了..！
是的，如果您的服务器上有成千上万的图像和内容，这将是一个大问题。基本上我想实现一个像 Qora 的文本编辑器