利用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. 敏捷开发之Scrum站立会议

    Scrum是迭代式增量软件开发过程,通常用于敏捷开发.站立会议通常指Scrun方法中的每日站立会议.顾名思义,是每天以站姿的方式召开的会议.以下从功能及要点方面对其进行解释说明: 功能:     1. ...

  2. webpack打包多html开发案例新

    闲来无事在原来简单打包案例的基础上,参考vue-cli的打包代码,改为多文件打包. 区别于上篇文章<webpack打包多html开发案例>,此次打包根据开发的不同环节进行打包,也就是有开发 ...

  3. Java数学函数Math类

    Java数学函数Math类常用: Math.abs(12.3); //12.3 返回这个数的绝对值 Math.abs(-12.3); //12.3 Math.copySign(1.23, -12.3) ...

  4. C# 开发人员的函数式编程

    摘要:作为一名 C# 开发人员,您可能已经在编写一些函数式代码而没有意识到这一点.本文将介绍一些您已经在C#中使用的函数方法,以及 C# 7 中对函数式编程的一些改进. 尽管 .NET 框架的函数式编 ...

  5. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  6. java 类的强制转型

  7. luogu 1967 货车运输(最大生成树+LCA)

    题意:给出一颗n个点的图,q个询问,每次询问u到v的路径中最小的边最大是多少. 图的最大生成树有一个性质,对于该图的任意两个点,在树中他们之间路径的最小边最大. 由于这个图不一定联通,于是我们对它的联 ...

  8. BZOJ5017 Snoi2017炸弹(线段树+强连通分量+缩点+传递闭包)

    容易想到每个炸弹向其能引爆的炸弹连边,tarjan缩点后bitset传递闭包.进一步发现每个炸弹能直接引爆的炸弹是一段连续区间,于是线段树优化建图即可让边的数量降至O(nlogn).再冷静一下由于能间 ...

  9. [codeforces696B]Puzzles

    B. Puzzles time limit per test  1 second memory limit per test 256 megabytes input standard input ou ...

  10. MapReduce(五) mapreduce的shuffle机制 与 Yarn

    一.shuffle机制 1.概述 (1)MapReduce 中, map 阶段处理的数据如何传递给 reduce 阶段,是 MapReduce 框架中最关键的一个流程,这个流程就叫 Shuffle:( ...