python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。
常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。
这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。
以下是实现上述思路的方法：
1. 模板文件
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<form action="">
{% csrf_token %}
<h3>用户注册</h3>
<p>用户名：<input type="text" name="userName"></p>
<p>密码：<input type="password" name="password"></p>
<p>邮箱：<input type="text" name="email"></p>
<input id="avatar" type="text" value="/static/images/sample.png" name="avatar" > {# 实际应用中要将该input标签隐藏，display:none; #}
<p><input type="submit" value="注册"></p>
</form>
<div >
<input id="avatarSlect" type="file" >
<img id="avatarPreview" src="/static/images/sample.png" title="点击更换图片" >
</div>
</div>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
$(function () {
bindAvatar();
});
function bindAvatar() {
if(window.URL.createObjectURL){
bindAvatar3();
}else if(window.FileReader){
bindAvatar2();
}else {
bindAvatar1();
}
}
/*Ajax上传至后台并返回图片的url*/
function bindAvatar1() {
$("#avatarSlect").change(function () {
var csrf = $("input[name='csrfmiddlewaretoken']").val();
var formData=new FormData();
formData.append("csrfmiddlewaretoken",csrf);
formData.append('avatar', $("#avatarSlect")[0].files[0]); /*获取上传的图片对象*/
$.ajax({
url: '/upload_avatar/',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (args) {
console.log(args); /*服务器端的图片地址*/
$("#avatarPreview").attr('src','/'+args); /*预览图片*/
$("#avatar").val('/'+args); /*将服务端的图片url赋值给form表单的隐藏input标签*/
}
})
})
}
/*window.FileReader本地预览*/
function bindAvatar2() {
console.log(2);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var fr=new FileReader();
fr.onload=function () {
$("#avatarPreview").attr('src',this.result);
console.log(this.result);
$("#avatar").val(this.result);
};
fr.readAsDataURL(obj);
})
}
/*window.URL.createObjectURL本地预览*/
function bindAvatar3() {
console.log(3);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var wuc=window.URL.createObjectURL(obj);
$("#avatarPreview").attr('src',wuc);
$("#avatar").val(wuc);
{# $("#avatarUrl").load(function () {#} /*当图片加载后释放内存空间，但在jQuery3.2.1中会报错。浏览器关闭后也会自动释放*/
{# window.URL.revokeObjectURL(wuc);#}
{# })#}
})
}
</script>
</html>
2. 视图函数
upload_avatar.py
from django.shortcuts import render, HttpResponse
def test(request):
return render(request, 'test.html')
def upload_avatar(request):
file_obj = request.FILES.get('avatar')
file_path = os.path.join('static/images', file_obj.name)
with open(file_path, 'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk)
return HttpResponse(file_path)
3. 路由系统
urls.py
from django.conf.urls import url from django.contrib import admin from home import views as homeViews urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^upload_avatar/', homeViews.upload_avatar), # 上传头像 url(r'^test/', homeViews.test), # 测试页面 ]
验证效果：
选择图片前：
Ajax上传图片至服务器，并返回浏览器该图片的url：
window.FileReader本地预览，form表单提交：
window.URL.createObjectURL本地预览，form表单提交：
以上这篇python 实现上传图片并预览的3种方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
python从网络读取图片并直接进行处理的方法
本文实例讲述了python从网络读取图片并直接进行处理的方法.分享给大家供大家参考.具体实现方法如下: 下面的代码可以实现从网络读取一张图片,不需要保存为本地文件,直接通过Image模块对图片进行处理,这里使用到了cStringIO库,主要是把从网络读取到的图片数据模拟成本地文件. import urllib2 import Image import cStringIO def ImageScale(url,size): file = cStringIO.StringIO(urllib2.url
-
python实现读取并显示图片的两种方法
在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 matlab. 一.matplotlib 1. 显示图片 import matplotlib.pyplot as plt # plt 用于显示图片 import matplotlib.image as mpimg # mpimg 用于读取图片 import numpy as np lena = mpimg.imread('lena.png')
-
python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 test.html <!DOCTYPE html>
-
js前端实现多图图片上传预览的两个方法(推荐)
一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu
-
jQuery实现上传图片前预览效果功能
网上很多代码实现了上传图片这个功能,但不支持实时预览图片,下面实现了上传图片前预览效果功能,具体如下 效果如图: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery上传图片之前可以预览效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jq
-
JS实现上传图片实时预览功能
前段时间在网络上找的代码,修改了一部分用在了项目里.原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除. //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_' + fileObj.na
-
Ajax 上传图片并预览的简单实现
1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>图片上传 | cookie</title> </head> <body> file: <
-
简单实现jQuery上传图片显示预览功能
本文实例为大家分享了jQuery上传图片显示预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img
-
js上传图片及预览功能实例分析
本文实例讲述了js上传图片及预览功能.分享给大家供大家参考.具体分析如下: 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".
-
js实现上传图片及时预览
本文实例为大家分享了javascript图片预览功能实现的具体代码,供大家参考,具体内容如下 先为大家分享一段关于js图片预览的代码,兼容火狐和谷歌浏览器 /* 案例展示图片预览 */ $(function(){ $("#file0").bind("change",function(){ clickupLoad(); }); }); function clickupLoad(){ var imgObject = document.getElementById('fi
-
jQuery实现的上传图片本地预览效果简单示例
本文实例讲述了jQuery实现的上传图片本地预览效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net jquery上传图片本地预览效果</title> </head> <body> <script type="text/javascript&qu
-
JS实现图片预览的两种方式
考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源. 那么要实现预览有两种方式:一种是用window.URL.createObjectURl方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器. 那么无论那种方法,首先都得得到文件数据,获得文件数据是从files集合中获取. 方式一: 代码如下: <input type=fil