0825自我總結
<img src="/static/img/default.png" width="80" height="80" style="margin-left: 20px" id="id_img">
<input type="file" name="file" id="id_file">
<script>
//當該控件發生變化,響應該事件
$("#id_file").change(function () {
//alert(1)
//取到文件對象
var file = $("#id_file")[0].files[0]
//放到img控件上,藉助於filereader 中間的東西,文件閱讀器
//生成一個文件閱讀器對象賦值給filereader
var filereader = new FileReader()
//把文件讀到filereader對象中
//讀文件須要時間,須要文件讀完再去操做img
//若是沒這一步操做下面不必定變化
filereader.readAsDataURL(file)
filereader.onload = function () {
$("#id_img").attr('src', filereader.result)
}
})
</script>
2.對於後臺傳輸與接收
1.傳輸
<script>
xxxxxxxxxx #就是就是觸發傳圖片的時間,下面核心的aja**-
$.ajax({
url: '/register/',
type: 'post',
data: {'img':$("#id_file")[0].files[0]},
success: function (data){
}
})
</script>
2.接收
#核心代碼
img=request.FILES.get('img')
#若是設置中沒有設置默認存儲在avatar文件下
#對於存儲位置設置須要在setting中設置
#加這兩句,之後再上傳的圖片,都放在media文件夾下
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
3.路由
#開路由,直接經過URL能訪問源碼
from django.views,static import serve
from django.conf import settings #要載入他的配置文件
urlpatterns = [
url(r'^media/(?P<path>.*)',serve,{'document_root':'文件的根路徑'}),
]
#他會進行拼接,根據傳的path拼接再文件的根路徑後,而後找到文件