一。前端代码

<!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. [转帖]linux下安装7z命令及7z命令的使用

    linux下安装7z命令及7z命令的使用 https://www.cnblogs.com/yiwd/p/3649094.html yum install p7zip 执行命令为 7za x 或者是 7 ...

  2. Django-09-cookie和session

    1. 简介 <1> cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie的工作原 ...

  3. 通过 SMB 共享目录

    在 system1 上配置SMB服务 ,要求: 1.您的 SMB 服务器必须是 STAFF 工作组的一个成员 2.共享 /common 目录,共享名必须为 common 3.只有 group8.exa ...

  4. 【解决方案】文件上具有 Web 标记，请删除 Web 标记

    错误: 无法处理文件 Form1.resx,因为它位于 Internet 或受限区域中,或者文件上具有 Web 标记.要想处理这些文件,请删除 Web 标记.  解决方法: 文件-右键-属性 点击”解 ...

  5. 无法定位 Local Database Runtime 安装。请验证 SQL Server Express 是否正确安装以及本地数据库运行时功能是否已启用。

    错误描述: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接. (provide ...

  6. Java调用Http/Https接口(4)--HttpClient调用Http/Https接口

    HttpClient是Apache HttpComponents项目下的一个组件,是Commons-HttpClient的升级版,两者api调用写法也很类似.文中所使用到的软件版本:Java 1.8. ...

  7. dede自定义内容模型下，列表只显示10条的问题及解决方法

    <div class="zjtd-content-ld s-content"> {dede:arclist tagid='ld' row='100' pagesize= ...

  8. mysql的yearweek 和 weekofyear函数

    1.MySQL 的 YEARWEEK 是获取年份和周数的一个函数,函数形式为 YEARWEEK(date[,mode]) 例如 2010-3-14 ,礼拜天 SELECT YEARWEEK('2010 ...

  9. 基于webpack的前端工程化开发解决方案探索（三）：webpack-dev-server

    前两篇中我们使用webpack完成了静态资源(css/js/img)等自动写入HTML模板中,同时还可以为静态资源添加hash版本号,既满足了我们对于静态资源的打包要求,同时又无需开发人员介入打包过程 ...

  10. Appscan漏洞 之 加密会话（SSL）Cookie 中缺少 Secure 属性

    近期 Appscan扫描出漏洞 加密会话(SSL)Cookie 中缺少 Secure 属性,已做修复,现进行总结如下: 1.1.攻击原理 任何以明文形式发送到服务器的 cookie.会话令牌或用户凭证 ...