Wysihtml5：如何將插入的圖像下載到服務器？

我目前使用的是Wysihtml5 HTML文本編輯器。它運作良好。但現在我想將插入的圖像存儲在我的Amazon S3 Bucket上。Wysihtml5：如何將插入的圖像下載到服務器？

當有人從URL插入圖像時，該圖像應位於我自己的服務器或存儲桶中。

目前Wysihtml5編輯器通常保存圖像源。在這裏看到：http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/

當我按下插入圖像;

應該圖像存儲到我的服務器
那麼就應該用我自己的服務器URL路徑替換圖像的舊源URL

如何觸發插入圖像按鈕與阿賈克斯圖片下載請求？在實現此功能之前應該做什麼？

來源

2017-02-25 hakiko

我檢查了它，但它不工作properly..Hey相反，你應該使用這個：http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/ –

我不明白你@U mairShahYousafzai？你檢查什麼工作不正常？ – hakiko

我正在檢查插入圖像功能，它不工作得很好..首先它不能從'https'鏈接添加圖像，也不能從具有額外參數的鏈接添加圖像，然後當我將鏈接更改爲'http '而不是所以只有一次它插入圖像，然後當我刪除圖像，並再次嘗試，那麼它不會添加插入圖像了..！可能是某種錯誤......正如在描述中所說的那樣，它已不再被維護......！：D –

這裏是你如何能準確地做到這一點：

看看鏈接：

粘貼基於事件的圖片上傳腳本：http://huntedhunter.com/uploadimage/

我剛纔寫的一小會兒前。。！

如何使用：

當有人粘貼到輸入字段，因此圖像的URL將通過Ajax POST請求的文件發佈到upload.php的HTTP站點圖像鏈接和upload.php文件下載的圖像並保存恰到好處它在本地服務器上，然後新的圖像url收到Ajax響應當前頁面，因此你可以做任何事情的迴應..！

下面是代碼：

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; 
?>

來源

2017-02-26 01:16:29

這很酷。我可以做這部分，但我更大的問題是如何將此解決方案連接到wysihtml？：）如果用戶從文本編輯器中刪除圖像，會發生什麼？ – hakiko

現在你真的想讓我爲你做嗎？：D：P –

我剛剛爲我的問題找到了一個解決方案：） – hakiko

Wysihtml5：如何將插入的圖像下載到服務器？

回答

相關問題