一。前端代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script>

    // 创建一个表单对象（用于存储要发送的data数据）

    form_data = new FormData;    

    // 参数1：后端请求时要获取的参数, 参数2：图片文件File对象

    form_data.append("files", $("#file_img")[0].files[0]);

    // 向后端发送 ajax 请求

    $("#btn").click = function(){

        $.ajax({

            url: "/img/save/",

            method: "post",

            contentType: false,        // 告诉jQuery不要去设置Content-Type请求头

            processData: false,        // 告诉jQuery不要去处理发送的数据

            data: form_data,

            success: function(data){

                console.log("上传成功！");

            }, error: function(data){

                console.log("上传失败！");

            }

        })

    }

</script>    

<body>

    <form>

        <input type="file" id="file_img">

        <input type="button" value="提交" id=btn>

    </form>    

</body>

</html>

二。后端代码。

# 1. settings  设置图片保存路径

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, "up_img")

# 2. models

class Image(models.Model):

    path_and_rename = PathAndRename("order/pho") 
　　　　　　　　　　　　　　　 # 图片存储路径　-　最终呈现路径：/up_img/order/pho/xx.jpg

    image = models.ImageField(verbose_name=u"图片", upload_to=path_and_rename)

# 3. url

url(r'^img/save/$', surface_save, imgViews),

# 4. views

def imgViews(request):

    file_img = request.FILES.get('files', None)

    filename, full_filename = save_image(file_img)

    Image.objects.create(image=filename)

# 定义一个保存图片的方法

def save_image(files):

    filename = "%s.%s" % (timezone.now().strftime('%Y%m%d%H%M%S%f'), files.name.split('.')[-1])

    full_filename = "%s/%s" % (settings.MEDIA_ROOT, filename)

    with open(full_filename, 'wb+') as destination:

        for chunk in files.chunks():

            destination.write(chunk)

    return filename, full_filename

三。前端渲染

<img src="{{ img_obj.image.url }}" alt="">

# {{ img_obj.image.url }} 拿出来的是图片路径, img_obj是models中Image表对象
# 2. models

python - django 使用ajax将图片上传到服务器并渲染到前端的更多相关文章

  1. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  2. php form 图片上传至服务器上

    本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...

  3. 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  4. Django中怎么做图片上传--图片展示

    1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...

  5. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  6. ckeditor如何能实现直接粘贴把图片上传到服务器中?

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  7. Express+MySQL实现图片上传到服务器并把路径保存到数据库中

    demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer 先搭建服务器并展示html页面 const express = require("express ...

  8. 根目录97 <input file>标签，把图片上传到服务器（跟增删改查一起实现）

    首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...

  9. word图片上传到服务器

    参考:http://blog.ncmem.com/wordpress/2019/08/07/word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e5%88%b0%e6%9 ...

随机推荐

  1. Delphi TButton.OnClick 匿名函数用法

    type TNotifyEventRef = reference to procedure(Sender: TObject); function AnonymousEvent(const Proc: ...

  2. docker关系图解析

    docker关系图解析 一.docker有5种状态 Dockerfile 文本文件,制作images的配置文件 images image,静态文件 containers container image ...

  3. Python之虚拟环境virtualenv、pipreqs生成项目依赖第三方包

    virtualenv简介 含义: virtual:虚拟,env:environment环境的简写,所以virtualenv就是虚拟环境,顾名思义,就是虚拟出来的一个新环境,比如我们使用的虚拟机.doc ...

  4. 2019-7-19 包、logging模块、hashlib（加密模块）、openpyxl模块、深浅拷贝

    一.包 什么是包: 它是一系列模块文件的结合体,表示形式就是一个文件夹.该文件内部通常会有一个__init__.py文件,包的本质还是一个模块,可以被调用,调包就相当于与调用__init__.py文件 ...

  5. Tcl语言学习--基础知识

    一.脚本.命令和单词符号 一个TCL脚本可以包含一个或多个命令.命令之间必须用换行符或分号隔开. 1.关键字/变量 变量是程序的基础变量组成:变量名.变量值变量名要求:任何字符串都可以作为变量名,区分 ...

  6. ArcGIS加载数据中常用的File文件方法总结

    在介绍ArcGIS中各种数据的打开方法时,我们用到了许多对于File文件的操作,在此做一个常用用法的总结.例如, 介绍ArcGIS中各种数据的打开方法——mxd(地图文档) 以方法一为例:运用Load ...

  7. java之spring之依赖注入

    一.DI: Dependency injection; 依赖注入 依赖注入和控制反转是同一个概念的不同说法. 对象的创建依赖于容器.对象属性的设置是由容器来设置. 对象属性的赋值过程称为注入. 二.S ...

  8. ImportError: cannot import name Namespace

    运行socketServer报错. 解决: pip uninstall python-socketio pip install python-socketio

  9. iOS - 崩溃异常处理（1）

    https://www.jianshu.com/p/4d32664dcfdb 一.关于崩溃 闪退估计是我们最不想看到的,对于用户而言,马上就能产生一种不悦,对于投资方而言,也会产生对技术实力的不信任感 ...

  10. 突然用xcode老版本调试老代码测试新机，报错"Could not find Developer Disk Image"回忆下

    转载:https://www.cnblogs.com/blogwithstudyofwyn/p/6003176.html 说明:更新了手机的到了iOS 10.0.2.真机调试时候提示"Cou ...