上傳圖像到頁面（在CONTENTEDITABLE格） - 最好用d＆d

我希望我沒有複製任何問題上傳圖像到頁面（在CONTENTEDITABLE格） - 最好用d＆d

我試圖通過AJAX實現上傳圖片到網頁。我發現（我認爲不錯的一個）插件jQuery的，它可以處理圖片上傳：

https://github.com/blueimp/jQuery-File-Upload

現在，我有我真的不知道，如果這個插件可以幫我上傳了一個問題包含任何內容的div。想象一下，我有類似similiar：

... 
<div contenteditable="true"> 
    <p>This is some example text</p> 
</div> 
...

我想簡單的拖動圖像並將其顯示在實際光標位置（但未來</p>標籤後basicly）。結果應該是相同的，就像你可以將圖像上傳到Gmail一樣（並顯示在文本中）。當然，在上傳過程中以div格式顯示圖像（如果可能的話）也是可以的（拖動過程中用戶會看到他放置圖像的位置）。結果應該是這樣的：

... 
<div contenteditable="true"> 
    <p>This is some example text</p> 
    <div> <!-- containger for HTML validation ->> 
     <img src="/uploaded-image.png" /> 
    </div> 
</div> 
...

有沒有什麼解決如何hnadle此，特意draging圖像到文本光標位置？基於jQuery的插件或純JS代碼都是可能的。

來源

2013-07-06 tomis

HTML5有一個可以使用的內置拖放和文件讀取器API。

我假設你想達到像this這樣的東西。

我建議你閱讀這兩篇文章：

來源

2013-07-06 18:36:13

首先在德國，你想我:-D很長一段時間，當我在這說的。第二篇文章看起來很有幫助 - 我有工作的例子，但我想知道是否有可能將圖像放置在光標位置的contenteditable div - 這就是我在那裏失蹤:-( – tomis

你可以使用[KineticJS]（http ：//www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/），如果你還沒有考慮到它。 –

上傳圖像到頁面（在CONTENTEDITABLE格） - 最好用d＆d

回答

相關問題