Javascript Wysihtml5：如何将插入的图像下载到服务器？
我目前正在使用Wysihtml5 HTML文本编辑器。它工作得很好。但现在我想在AmazonS3存储桶中存储插入的图像 当有人从URL插入图像时，该图像应该位于我自己的服务器或存储桶上 目前所见即所得的HTML5编辑器通常保存图像源。 请看这里： 当我按insert image时Javascript Wysihtml5：如何将插入的图像下载到服务器？,javascript,jquery,twitter-bootstrap,image-upload,wysihtml5,Javascript,Jquery,Twitter Bootstrap,Image Upload,Wysihtml5,我目前正在使用Wysihtml5 HTML文本编辑器。它工作得很好。但现在我想在AmazonS3存储桶中存储插入的图像 当有人从URL插入图像时，该图像应该位于我自己的服务器或存储桶上 目前所见即所得的HTML5编辑器通常保存图像源。 请看这里： 当我按insert image时 它应该将图像存储到我的服务器 然后它应该用我自己的服务器url路径替换图像的旧源url 如何使用Ajax请求触发图像下载的插入图像按钮？在实现此功能之前，我应该采取哪些步骤？以下是具体操作方法： 请看链接： 粘贴基于
如何使用Ajax请求触发图像下载的插入图像按钮？在实现此功能之前，我应该采取哪些步骤？以下是具体操作方法： 请看链接： 粘贴基于事件的图像上载程序脚本： 我刚刚写了这篇文章 工作原理：
<!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>
upload.phpupload.php<!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>
$（文档）.ready（函数（）{
$（'#insert'）。关于（'input'，函数（e）{
var$val=$（'#insert'）.val（）；
$.ajax({
url:'upload.php'，
键入：“POST”，
数据：{imageurl:$val}，
成功：功能（响应）{
$（'#newimageurl'）.val（响应）；
$（'showimage'）.attr（'src'，response）；
},
错误：函数（）{
//您的错误代码
}
});
});
});
插入图像：
您的新图像URL：
你的新形象：
httpshttpJSPHP