189 8069 5689

JS如何实现上传图片功能

这篇文章将为大家详细讲解有关JS如何实现上传图片功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、重庆小程序开发公司、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了北仑免费建站欢迎大家使用！

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。

常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。

这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。

以下是实现上述思路的方法：

1. 模板文件




  
  Title


  
    
      {% csrf_token %}
    
用户注册

    
用户名：

    
密码：

    
邮箱：

       {# 实际应用中要将该input标签隐藏，display:none; #}
      

      
    
    
    
      
  

2. 视图函数

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. 路由系统

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), # 测试页面
]

验证效果：

选择图片前：

JS如何实现上传图片功能

Ajax上传图片至服务器，并返回浏览器该图片的url：

JS如何实现上传图片功能

window.FileReader本地预览，form表单提交：

JS如何实现上传图片功能

 window.URL.createObjectURL本地预览，form表单提交：

JS如何实现上传图片功能

关于“JS如何实现上传图片功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


当前文章：JS如何实现上传图片功能
网页地址：http://cdxtjz.cn/article/psjsci.html

其他资讯