JS如何實(shí)現(xiàn)上傳圖片功能

這篇文章將為大家詳細(xì)講解有關(guān)JS如何實(shí)現(xiàn)上傳圖片功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)公司、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了北侖免費(fèi)建站歡迎大家使用！

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫(xiě)HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

在常見(jiàn)的用戶(hù)注冊(cè)頁(yè)面，需要用戶(hù)在本地選擇一張圖片作為頭像，并同時(shí)預(yù)覽。

常見(jiàn)的思路有兩種：一是將圖片上傳至服務(wù)器的臨時(shí)文件夾中，并返回該圖片的url，然后渲染在html頁(yè)面；另一種思路是，直接在本地內(nèi)存中預(yù)覽圖片，用戶(hù)確認(rèn)提交后再上傳至服務(wù)器保存。

這兩種方法各有利弊，方法一很明顯，浪費(fèi)流量和服務(wù)器資源；方法二則加重了瀏覽器的負(fù)擔(dān)，并且對(duì)瀏覽器的兼容性要求更高（在某些低版本中的IE瀏覽器不支持）。

以下是實(shí)現(xiàn)上述思路的方法：

1. 模板文件




  
  Title


  
    
      {% csrf_token %}
    用戶(hù)注冊(cè)
    用戶(hù)名：
    密碼：
    郵箱：
       {# 實(shí)際應(yīng)用中要將該input標(biāo)簽隱藏，display:none; #}

2. 視圖函數(shù)

from django.shortcuts import render, HttpResponse
def test(request):
  return render(request, 'test.html')
def upload_avatar(request):
  file_obj = request.FILES.get('avatar')
  file_path = os.path.join('static/images', file_obj.name)
  with open(file_path, 'wb') as f:
    for chunk in file_obj.chunks():
      f.write(chunk)
  return HttpResponse(file_path)

3. 路由系統(tǒng)

from django.conf.urls import url
from django.contrib import admin
from home import views as homeViews
urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^upload_avatar/', homeViews.upload_avatar), # 上傳頭像
  url(r'^test/', homeViews.test), # 測(cè)試頁(yè)面
]

驗(yàn)證效果：

選擇圖片前：

JS如何實(shí)現(xiàn)上傳圖片功能