현재 Wysihtml5 HTML 텍스트 편집기를 사용하고 있습니다. 잘 작동한다. 하지만 이제 Amazon S3 Bucket에 삽입 된 이미지를 저장하려고합니다.Wysihtml5 : 삽입 된 이미지를 서버로 다운로드하는 방법은 무엇입니까?
누군가 URL에서 이미지를 삽입하면 그 이미지는 내 서버 또는 버킷에 있어야합니다.
현재 Wysihtml5 편집기는 일반적으로 이미지 소스를 보유하고 있습니다. 여기를 참조하십시오 : http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/
내가 삽입 이미지를 누르면;
어떻게 아약스와 이미지 다운로드 삽입 이미지 버튼을 트리거 할 의뢰? 이 기능을 구현하기 전에 내 단계가되어야합니까? 여기
는 당신이 그것을 할 수있는 방법을 정확하게 :http://huntedhunter.com/uploadimage/
난 그냥 조금 전에 쓴 :
붙여 넣기 이벤트를 기반으로 이미지 업 로더 스크립트 :
링크를 살펴 보자. .!
그것은 작동하는 방법 :
사람이 그렇게 이미지 URL이 아약스 POST 요청 파일을 통해 upload.php에 게시되는 입력 필드에 HTTP 사이트 이미지 링크를 붙여 넣기하고 upload.php 파일이 이미지를 다운로드하고 저장하면 바로 그것은 로컬 서버에 다음 새로운 이미지 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;
?>
내가 그것을 확인하지만 properly..Hey을 작동하지 않습니다 대신이 파일을 다음과 같이 사용해야합니다. http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/ –
나는 당신을 이해하지 못합니다. 수족관? 무엇이 제대로 작동하지 않았는지 무엇을 확인 했습니까? – hakiko
삽입 이미지 기능을 확인하고 있었는데 잘 작동하지 않았습니다. 처음에는'https' 링크에서 이미지를 추가 할 수 없었고 추가 매개 변수가있는 링크에서 이미지를 추가 할 수 없었고 'http '대신 한 번만 이미지를 삽입 한 다음 이미지를 제거하고 다시 시도하면 이미지 삽입을 더 이상 추가하지 않았습니다. 일종의 버그 일 수 있습니다 ... 설명 에서처럼 더 이상 유지되지 않는다고 말한 것입니다 ..! : D –