利用ajax实现图片预览的步骤为：

程序实现的方法为：

方法一：

upload.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="/static/js/jquery-1.12.4.js"></script>

    <style>

        .upload{

            display: inline-block;padding: 10px;

            background-color: brown;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 90;

        }

        .file{

            width: 100px;height: 50px;opacity: 0;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 100;

        }

    </style>

</head>

<body>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fafafa" onchange="changeUpalod();" />

        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>

    </form>

    <div id="preview"></div>

    <script>

        function iframeSubmit(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;     //访问的路径

                $('#preview').append(imgTag);

            })

        }

    </script>
Views.py
def upload(request):

    return render(request,'upload.html')

def upload_file(request):

    username = request.POST.get('username')

    fafafa = request.FILES.get('fafafa')

    import os

    img_path = os.path.join('static/image/',fafafa.name)    #存储的路径

    with open(img_path,'wb') as f:      #图片上传

        for item in fafafa.chunks():

            f.write(item)

    ret = {'code': True , 'data': img_path}  #'data': img_path 数据为图片的路径，

    import json

    return HttpResponse(json.dumps(ret))    #将数据的路径发送到前端

前端的效果为：

之后，可以看到

看此时的后台数据

可以看到此时的这张图片已经被保存在一个名为image的文件夹中

方法二（直接将图片进行预览，无需提交）：

upload.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="/static/js/jquery-1.12.4.js"></script>

    <style>

        .upload{

            display: inline-block;padding: 10px;

            background-color: brown;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 90;

        }

        .file{

            width: 100px;height: 50px;opacity: 0;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 100;

        }

    </style>

</head>

<body>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fafafa" onchange="changeUpalod();" />

 value="Form提交"/>#}

    </form>

    <div id="preview"></div>

    <script>

function changeUpalod(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                $('#preview').empty();        //原来有就先清空一下

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;   //制作路径

                $('#preview').append(imgTag);  //添加路径

            });

            $('#form1').submit();

        }

    </script>

</body>

</html>
Views.py

def upload(request):

    return render(request,'upload.html')

def upload_file(request):

    username = request.POST.get('username')

    fafafa = request.FILES.get('fafafa')

    import os

    img_path = os.path.join('static/image/',fafafa.name)    #存储的路径

    with open(img_path,'wb') as f:      #图片上传

        for item in fafafa.chunks():

            f.write(item)

    ret = {'code': True , 'data': img_path}  #'data': img_path 数据为图片的路径，

    import json

    return HttpResponse(json.dumps(ret))    #将数据的路径发送到前端

前端的效果为：

选择文件后的效果为：

后台的效果为：

图片被成功存储在image文件中

Django之利用ajax实现图片预览的更多相关文章

  1. 【django】ajax，上传文件，图片预览

    1.ajax 概述: AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  7. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  8. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  9. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

随机推荐

  1. ios基础动画、关键帧动画、动画组、转场动画等

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  2. android面试（2）----组件

    1.anroid:id的作用? android:id是作为控件的唯一标示符.可以使用与releativelayout中,也可以再Activity中通过findviewbyid来获得指定的控件. 2.a ...

  3. P2573 [SCOI2012]滑雪

    题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着 M 条供滑行的轨道和 N 个轨道之间的交点(同时也是景点),而且每个景点都有一编号 i ( 1≤i≤N )和一高度 Hi.a18028 ...

  4. Ubuntu 10.04 配置TQ2440交叉编译环境

    一.解压交叉编译开发工具包  EABI_4.3.3_EmbedSky_20100610.tar.bz2 $ sudo mkdir /opt/EmbedSky/     $ sudo cp -r /ho ...

  5. java学习3-Maven的使用

    Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Depen ...

  6. [POI2005]Bank notes

    link 试题分析 我们发现此题是一个十分简单的多重背包.但是按照朴素写法会超时.所以要去考虑优化. 我们发现我们若$W=7$,可以拆成$1+2+4$,不用每次$1+1+1+1+1+1+1$,从$N$ ...

  7. 【agc004F】Namori

    Portal -->agc004F Solution  好神仙的转化qwq ​  首先我们可以先考虑\(m=n-1\)的情况下,也就是树的情况下要怎么做  我们可以将这个问题转化一下:我们对这颗 ...

  8. 框架----Django框架知识点整理

    一.cbv cbv(class-base-view) 基于类的视图 fbv(func-base-view) 基于函数的视图 a.基本演示 urlpatterns = [ url(r'^login.ht ...

  9. 【乱搞】【CF1095E】 Almost Regular Bracket Sequence

    Description 给定一个长度为 \(n\) 的小括号序列,求有多少个位置满足将这个位置的括号方向反过来后使得新序列是一个合法的括号序列.即在任意一个位置前缀左括号的个数不少于前缀右括号的个数, ...

  10. python学习(十七) 爬取MM图片

    这一篇巩固前几篇文章的学到的技术,利用urllib库爬取美女图片,其中采用了多线程,文件读写,目录匹配,正则表达式解析,字符串拼接等知识,这些都是前文提到的,综合运用一下,写个爬虫示例爬取美女图片.先 ...