一。前端代码

<!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阿里云短信【支持短信发送、短信批量发送和查询短信发送记录】

    作者QQ:(648437169) 点击下载➨Delphi阿里云短信             阿里云api文档 [Delphi 阿里云短信]是最新的阿里云短信接口,不是阿里大于短信接口,支持SendSm ...

  2. S02_CH12_ AXI_Lite 总线详解

    S02_CH12_ AXI_Lite 总线详解 12.1前言 ZYNQ拥有ARM+FPGA这个神奇的架构,那么ARM和FPGA究竟是如何进行通信的呢?本章通过剖析AXI总线源码,来一探其中的秘密. 1 ...

  3. 「UER#2」谣言的传播

    「UER#2」谣言的传播 写了个乱搞,怎么莫名其妙就AC了,这...,之后又想了30min结合题解终于会证了. 首先最大值比较简单,记 \(f_i\) 为第 \(i\) 个点能到达的点数,上界 \(\ ...

  4. 或与异或 [背包DP]

    也许更好的阅读体验 \(\mathcal{Description}\) 给定\(n\)和长度为\(n\)的数组\(a\) 问从\(a\)中选取任意个数使得其 异或起来的值 等于 或起来的值 的方案数 ...

  5. 小程序canvas绘制base64数据格式图片

    翻了微信小程序官方文档,看了看画板drawImage的用法,官方对所要绘制的图片资源路径并没有很详细,模棱两可,没说支持什么格式的路径.今天我就试一下支不支持base64格式的图片 随便找张图片从网上 ...

  6. Unity - 绘制正五边形网格

    本文简述了Unity中绘制正五边形网格的基本方法:计算顶点信息.设置三角形覆盖信息.创建配置mesh 绘制方法 基本思路:计算出五边形顶点坐标信息作为数组,设置三角形包围方式,再创建新的mesh配置v ...

  7. 批量关联update

    UPDATE A SET A.field = B.field from table A inner join table B ON A.field = b.field

  8. python3基础之“术语表（2）”

    51.编程: 让计算机执行的指令. 52.代码: 让计算机执行的命令. 53.底层编程语言: 与高级语言相比,更接近二进制的语言. 54.高级编程语言: 读起来像英语的易于理解的语言. 55.汇编语言 ...

  9. 面试总结之Data Science

    数据科学家面试如何准备? https://mp.weixin.qq.com/s/uFJ58az8WRyaXT2nibK02g 2020 年算法 / 数据分析面试数学考点梳理 https://mp.we ...

  10. sublime 快速编写代码技巧

    在sublime上装了Emmet插件后,我们就可以利用以下技巧快速编写代码 1.自动生成html头文件 html:5 或!:用于HTML5文档类型 html:xt:用于XHTML过渡文档类型 html ...