一。前端代码

<!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. 009 SpringCloud 学习笔记5-----Hystrix保护机制

    1.概述 Hystrix,英文意思是豪猪,全身是刺,看起来就不好惹,是一种保护机制.Hystrix也是Netflix公司的一款组件.主页:https://github.com/Netflix/Hyst ...

  2. 修改Jupyter Notebook的默认打开路径

    一: (也可以直接将删除的部分修改成所要存储的文件路径,之后三个步骤就可以省去了) 二: 打开Windows的cmd,在cmd中输入jupyter notebook --generate-config ...

  3. 【2】【典型一维动态规划】【剑指offer+leetcode53】连续子数组的最大和

    HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量中包含负数 ...

  4. kubernetes-dashboard登录出现forbidden 403

    登录k8s dashboard https://xxxxx:6443/api/v1/namespaces/kube-system/services/https:kubernetes-dashboard ...

  5. 创建maven父项目以及子项目

    创建maven父项目以及子项目(Eclipse创建Maven Project跟Maven Module)https://blog.csdn.net/Mrsanger/article/details/8 ...

  6. 2019 竞技世界java面试笔试题 （含面试题解析）

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.竞技世界等公司offer,岗位是Java后端开发,最终选择去了竞技世界. 面试了很多家公司,感觉大部分公司考察的点 ...

  7. js中cssText批量修改元素样式

    平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...

  8. 类选择器与ID选择器的比较

    如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...

  9. 【MFC】在CHtmlView中在同一窗口显示新打开页面

    使用MFC的单文档,用IE核心做的简单浏览器.当打开一个新的链接时,IE核心会使用IE来打开一个新窗口显示打开的新页面.为了让新页面在本程序中显示,我试了如下方法,其中的问题一并列出: 方法1.重载C ...

  10. java HttpClient操作工具类

    maven: <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId> ...