一。前端代码

<!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. 21 Oracle 数据库的安装教程

    1.百度网盘中下载oracle 11g的安装包 win64_11gR2_database 解压后: 2.安装过程 <1>双击setup.exe,等待一会(2分钟左右),跳出如下界面. 点击 ...

  2. [转帖]Linux中buff/cache内存占用过高解决办法

    Linux中buff/cache内存占用过高解决办法 https://www.cnblogs.com/rocky-AGE-24/p/7629500.html /proc/sys/vm/drop_cac ...

  3. WSAEventSelect模型

    WSAEventSelect模型 EventSelect WSAEventSelect function The WSAEventSelect function specifies an event ...

  4. Delphi文字转语音TTS【支持选择语音库，播放，暂停，开始，停止，生成语音文件，设置音量，设置语速】

    作者QQ:(648437169) 点击下载➨文字转语音TTS [Delphi 文字转语音TTS]调用系统自带的TTS组件,支持XP,vista,win7,win8,win10系统,支持选择语音库,播放 ...

  5. Django-05-视图函数

    http请求中产生两个核心对象: http请求:HttpRequest对象 http响应:HttpResponse对象 所在位置:django.http 之前我们用到的参数request就是HttpR ...

  6. DRF框架（三）——media资源路径设置、多表设计复习及补充、序列化组件(ModelSerializer)操作多表（序列化与反序列化）、多表序列化与反序列化整合（重点）

    media资源路径设置  (设置好后把图片放在这个文件夹中,通过链接能访问到图片) 1.先在根目录设置一个media文件夹 2.配置settings.py,加上下面的 MEDIA_URL = '/me ...

  7. python罗列oss文件

    # 列举文件 import oss2 from itertools import islice AccessKeyId = "your accesskeyid" AccessKey ...

  8. golang ---JSON-ITERATOR 使用

    jsoniter ( json-iterator )是一款快且灵活的 JSON 解析器 Jsoniter 是最快的 JSON 解析器.它最多能比普通的解析器快 10 倍之多, 独特的 iterator ...

  9. linux 释放系统内存命令

    1.sync 因为系统在操作的过程当中,会把你的操作到的文件资料先保存到buffer中去,因为怕你在操作的过程中因为断电等原因遗失数据,所以在你操作过程中会把文件资料先缓存.所以我们执行sync命令, ...

  10. C# vb .net实现轮廓特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的轮廓特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...