相關(guān)閱讀
JQuery Ajax使用FormData對象上傳文件 圖片 | CSDN
Django 圖片上傳、存儲與顯示 | 博客園
Bootstrap Modals（模態(tài)框） | 菜鳥教程
JQuery 往textarea中光標所在位置插入文本 | CSDN
Django 設(shè)置media static | 博客園
前后花了快5,6個小時，期間搜索了很多東西，才勉強完成這個功能，推薦閱讀有遺漏
需求
概述：給一個頁面，添加一個圖片上傳的功能
詳細描述
- 頁面添加按鈕，當點擊按鈕時，彈出上傳圖片的框
- 選中需要上傳的圖片，提交，后端返回瀏覽器可查看圖片的url
- 退出顯示的框，在此前文本編輯的部分，光標選中處，插入markdown的格式，要求能夠在轉(zhuǎn)為html后正常顯示圖片
大致要實現(xiàn)簡書的markdown的編輯器功能，當然，直接粘貼上傳圖片難度系數(shù)未知，方式未知，只有想著通過按鈕上傳
思路步驟
- 編輯前端html和jquery，完成點擊彈出框（bootstrap模態(tài)框），選擇圖片（form標簽中 input標簽，type屬性為 file，accppt屬性限制圖片類型）圖片信息從前端到后端（ajax發(fā)送post發(fā)送formData）
- django接收處理圖片信息（myfile = request.File.get('name',None),myfile.read() 二進制數(shù)據(jù)，myfile._name 文件名，os.path.splitext()[1]擴展類型），保存（with open rb）并按照預(yù)設(shè)返回HttpResponse(jsondata,content_type="application/json")
- 收到成功的信息后，進行頁面上變動,如何讓框隱藏下去(模態(tài)框hide)，同時，在之前的編輯位置，即光標處（拿來insertContent），插入文本
遇到的問題
- 通過什么上傳
通過html中form標簽，input的type類型選擇file，即上傳文件的選擇框，同時通過accept="image/*"限制只能選擇圖片
再通過綁定form的sumbit事件，在自定義的sumbit事件中，完成以post方式，formdata形式上傳圖片
我是首先通過原有項目的一處上傳文件的html結(jié)構(gòu)，照搬過來，同時了解它在我需要的位置有什么樣的作用，根據(jù)有的代碼關(guān)鍵詞，網(wǎng)上搜索先關(guān)帖子，然后去修改。才發(fā)現(xiàn)此處用到了bootstrap，一個后端工程師用來制作簡單前端效果的東西。
<!-- 圖片上傳部分 -->
<div class="col-center-block col-lg-10" style="margin-top:60px; margin-bottom: 10px;text-align: right">
<button type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-default btn-sm float-right">
上傳圖片
</button>
</div>
<!-- 上為按鈕，下為彈框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content upload_div">
<form id="uploadForm">
{% csrf_token %}
<div class="form-group">
<input type="file" name="teamFile" accept="image/*">
</div>
<div class="form-group" role="group" aria-label="...">
<input type="submit" class="btn btn-default col-lg-12">
</div>
<div class="clear"> </div>
</form>
</div>
</div>
</div>
<!-- 圖片上傳部分 -->
<script type="text/javascript">
(function($){
$.fn.insertContent = function(myValue, t) {
var $t = $(this)[0];
if (document.selection) {
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
sel.moveStart('character', -l);
var wee = sel.text.length;
if (arguments.length == 2) {
var l = $t.value.length;
sel.moveEnd("character", wee + t);
t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);
sel.select();
}
} else if ($t.selectionStart || $t.selectionStart == '0') {
var startPos = $t.selectionStart;
var endPos = $t.selectionEnd;
var scrollTop = $t.scrollTop;
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
this.focus();
$t.selectionStart = startPos + myValue.length;
$t.selectionEnd = startPos + myValue.length;
$t.scrollTop = scrollTop;
if (arguments.length == 2) {
$t.setSelectionRange(startPos - t, $t.selectionEnd + t);
this.focus();
}
}else {
this.value += myValue;
this.focus();
}
};
})(jQuery);
//上面為在textarea中光標位置處插入文本的插件？方法？，下為自定義sumbit
$(function(){
$('#uploadForm').submit(function(){
var data = new FormData($('#uploadForm')[0]);
$.ajax({
url: './uploadmarkimage',
type: 'POST',
data: data,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false,
success:function(data){
if(data.code==0){
var filename = data.msg.filename;
var url = data.msg.url;
var imgstr = "![]("+url+")";
var addstr = $("textarea[name='content']").val()+imgstr;
$("textarea[name='content']").insertContent(imgstr);
$("#myModal").modal('hide');
}else{
alert("上傳失敗，請稍后再試");
}
},
error: function (data) {
alert("網(wǎng)絡(luò)錯誤");
}
});
return false;
});
});
</script>
此部分多來自別人帖子分享
如何實現(xiàn)點擊時彈出
這是bootstrap里面的模態(tài)框的使用方法，即``data-toggle="modal" data-target="#myModal"`的用法，僅抄襲得來，最初不知道django如何接收
試圖尋找django接受formdata的方式，因為我認為上傳的方式不同，那么接受方式也應(yīng)該不同，比如，是在request.POST中還是request.FILES中，沒有找到現(xiàn)成的，自己的摸索花了些時間
import uuid
import os
import json
def uploadimage(request):
if request.method == 'POST':
myfile = request.FILES.get('teamFile',None)
filename = str(uuid.uuid1())+os.path.splitext(myfile._name)[1]
savename = os.path.join(os.getcwd(),'teamdoc')
savename = os.path.join(savename,'uploadFile')
savename = os.path.join(savename,filename)
code = 1000
if myfile:
with open(savename,'wb') as file:
file.write(myfile.read())
code = 0
else:
filename=''
jsondata =json.dumps({"code":code,"msg":{"url":'/uploadFile/%s'%(filename),'filename':myfile._name}})
return HttpResponse(jsondata,content_type="application/json")
如何上傳完后不刷新頁面
在別人的分享中，發(fā)現(xiàn)，加入return false后，自動跳轉(zhuǎn)的現(xiàn)象消失如何隱藏彈框
彈框，更標準的叫法是，模態(tài)框，是在我詢問了別人之后得到的（一開始不知道這是bootstrap的內(nèi)容，而且連bootstarp都不知道）。通過bootstrap的模態(tài)框用法可以找到隱藏函數(shù)，``$("#myModal").modal('hide')`如何在光標處插入文本
拿來主義。已有現(xiàn)成的，可以當做一個函數(shù)用的東西，在網(wǎng)上找到，也就是上面的form sumbit事件上的function，使用的時候通過$("textarea[name='content']").insertContent(imgstr)插入imgstr信息如何讓返回的url可顯示圖片信息
django的media路徑設(shè)置，一方面，在django中設(shè)定media文件的存放位置，比如磁盤的某個文件夾下，即MEDIA_ROOT,在setting.py中設(shè)置。同時在最外層的項目的url.py中，設(shè)定media訪問的url地址，并將這個地址和我們設(shè)定的磁盤上的位置關(guān)聯(lián)起來
# setting.py
PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
MEDIA_ROOT = os.path.join(PROJECT_PATH, 'uploadFile/').replace('\\', '/')
# urls.py
url(r'^uploadFile/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT})
然后瀏覽器通過
http://127.0.0.1:81/uploadFile/xxxx.jpg就可以加載，雖說也有配置MEDIA_URL，但此時這種配置，已經(jīng)滿足了需要似的，對media的配置還夠透徹
