Django ImageFiled上传照片并显示的方法

1:首先理解settings.py中

MEDIA_ROOT:

MEDIA_URL:这两者之间的关系。

MEDIA_ROOT:就是保存上传图片的根目录,比如说MEIDA_ROOT ="C:\\Django\\Photo",则上传的照片就在这个文件夹中,如果ImageFiled中设置了upload_to,这个upload_to则让图片是上述根目录中子目录中存储。upload_to注意设置要区分有没有 " / " ,例如 upload_to='photo' 与 upload_to = " /phto/ ”就会造成完全不同的后果,前面的用法是正确的。

MEDIA_URL:主要用于URL映射这块,与urls.py中一个映射有关系

例如:MEDIA_URL = '/media/', 这个MEDIA_URL是添加在ImageFIeld中存储路径的公共目录.例如

img=models.ImageField(upload_to='photo',null=False,blank=True)

则这个img的url属性就是 “/media/photo/xxx.jpg ,然后就需要考虑在Url文件中的映射,要在模板中访问该图片文件,则 img的src 设置为 {{ example.img.url }}即可

urls.py中应该添加如下一条映射 (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),

其中url中media就对应着MEDIA_URL中的配置,对 这类网址的访问都映射到MEDIA_ROOT这个目录,并根据ImageFIled中存储的相对路径进行访问。

把上述这几个之间关系弄明白,使用ImageField上传图片并显示就很容易

参考下列例子

#models.py
class Img(models.Model):
	name=models.CharField(max_length=30)
	img=models.ImageField(upload_to='photo',null=False,blank=True)
	def __unicode__(self):
		return self.name
#forms.py
class ImgForm(ModelForm):
	class Meta:
		model=Img
#views.py
@csrf_exempt
def add(request):
	if request.method == 'POST':
		form = ImgForm(request.POST,request.FILES)
		if form.is_valid():
			form.save()
	else:
		form = ImgForm()
	return render_to_response('add.html', {'form': form})

def list(request):
  template_var={}
  photos=Img.objects.all()
  template_var['pics']=photos
  return render_to_response('list.html',template_var,
            context_instance=RequestContext(request))
#settings.py
MEDIA_ROOT = "/xxxxx/media/"

# URL that handles the media served from MEDIA_ROOT. Make sure to use a
# trailing slash if there is a path component (optional in other cases).
# Examples: "http://media.lawrence.com", "http://example.com/media/"
MEDIA_URL = '/media/'
#urls.py
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),
#模板
<body>
	{% for photo in pics %}
		<h3><p class="greentitle"> {{photo.name}} </p></h3>
		<a href="{{photo.img.url}}" rel="external nofollow" ><img src="{{photo.img.url}}" alt="{{photo.img.url}}"></img></a>
		{% endfor %}
</body>
#模板
<body>

  <form enctype="multipart/form-data" action="" method="post">

    {{ form.as_p }}

    <input type="submit" value="Submit" />

  </form>

</body>

以上这篇Django ImageFiled上传照片并显示的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Django处理文件上传File Uploads的实例

    HttpRequest.FILES 表单上传的文件对象存储在类字典对象request.FILES中,表单格式需为multipart/form-data <form enctype="multipart/form-data" method="post" action="/foo/"> <input type="file" name="image" /> request.FILES中的键

  • Django1.9 加载通过ImageField上传的图片方法

    这里假设你是通过models的ImageField上传图片,并期望在前台img标签中能显示.能否访问图片关键在于,是否能通过正确的路径访问. 在models.py中有image如下 image = models.ImageField(upload_to='images/%Y/%m', verbose_name='文件缩略图') 在显示页面中如show.html中使用img标签显示 <img class="center-block thumbnail" src="{{re

  • django将图片上传数据库后在前端显式的方法

    1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=models.CharField('图片',max_length=40) pic_path=models.ImageField(upload_to="pic_folder/",default='pic_folder/None/no_image.pig') 3.在app的view中设置获取图片的

  • Django ImageFiled上传照片并显示的方法

    1:首先理解settings.py中 MEDIA_ROOT: MEDIA_URL:这两者之间的关系. MEDIA_ROOT:就是保存上传图片的根目录,比如说MEIDA_ROOT ="C:\\Django\\Photo",则上传的照片就在这个文件夹中,如果ImageFiled中设置了upload_to,这个upload_to则让图片是上述根目录中子目录中存储.upload_to注意设置要区分有没有 " / " ,例如 upload_to='photo' 与 uploa

  • 使用vant-uploader上传照片无法删除的解决

    目录 vant-uploader上传照片无法删除 解决方法 一些关于vant-uploader的前端问题 vant-uploader上传照片无法删除 在微信小程序使用vant-uploader上传图片时,发现点击右上角的小叉叉无法删除图片,查看了源码: (源码位置:miniprogram\miniprogram_npm@vant\weapp\uploader\index.js) deleteItem: function (event) { var index = event.currentTar

  • django实现图片上传数据库并显示

    Django文件上传,供大家参考,具体内容如下 需求 1.完成学生信息注册操作 2.将学生信息入库 3.将上传文件存放至项目下media文件夹下 4.显示所有学生信息 创建模型类 class Student(models.Model): sno = models.AutoField(primary_key=True) sname = models.CharField(max_length=30) photo = models.ImageField(upload_to='imgs') <!--内部

  • Android编程实现仿QQ发表说说,上传照片及弹出框效果【附demo源码下载】

    本文实例讲述了Android编程实现仿QQ发表说说,上传照片及弹出框效果.分享给大家供大家参考,具体如下: 代码很简单,主要就是几个动画而已,图标什么的就随便找了几个,效果图:   动画说明: 1.点击右上角按钮,菜单从顶部下拉弹出,同时背景变暗; 2.再次点击右上角按钮,点击返回键,或者点击空白区域(也就是变暗的部分),菜单向上收回; 3.点击菜单上的按钮响应事件,同时菜单收回(效果同2) 重要说明:动画结束后必须clearAnimation,否则隐藏状态的view依然能响应点击事件 主体代码

  • Django实现任意文件上传(最简单的方法)

    利用Django实现文件上传并且保存到指定路径下,其实并不困难,完全不需要用到django的forms,也不需要django的models,就可以实现,下面开始实现. 第一步:在模板文件中,创建一个form表单,需要特别注意的是,在有文件上传的form表单中,method属性必须为post,而且必须指定它的enctype为"multipart/form-data",表明不对字符进行编码,具体的代码如下: <form enctype="multipart/form-dat

  • Android :okhttp+Springmvc文件解析器实现android向服务器上传照片

    A.前言:为了解决安卓端向服务器上传照片的问题 1.获得相册权限,选取照片,取到照片的url 2.使用okhttp访问服务器并向服务器传照片 3.配置springmvc文件解析器 4.搭建服务器,获取数据保存照片 B.Android添加一个按钮和一个ImageView,设置它的点击事件,打开相册选择照片,解析得到照片的本机url,并把照片显示到ImageView里 添加权限: <uses-permission android:name="android.permission.INTERNE

  • php上传文件并显示上传进度的方法

    本文实例讲述了php上传文件并显示上传进度的方法.分享给大家供大家参考.具体如下: 记得上传文件的时候要大点,不然还没看出来就上传完了,并且上传的文件不要太大,上G的就算了,2G的我试了,PHP受不了,我测试的是300多M的,记得要调整小php.ini参数啊 "选文件=>提交=>获取信息"要一气呵成哦^ ^ <?php $prefix = ini_get('session.upload_progress.prefix'); $name = ini_get('sessi

  • 详解Android WebView的input上传照片的兼容问题

    问题 前几天接到的一个需求,是关于第三方理财产品的H5上传照片问题. 对方说他们的新的需求,需要接入方配合上传资产照片的需求,测试之后发现我们这边的app端,IOS端上传没有问题,而Android端则点击没有任何反应. 对方H5调用的方式是通过<input type='file' accept='image/*'/>的方式调用,本来以为这个问题很简单,就是app端没有设置相机权限,造成的点击无反应情况,而实际上加了之后发现,并非简单的权限问题. 解决问题 因为Android的版本碎片问题,很多

  • HTML5实现微信拍摄上传照片功能

    做了个微信的HTML5拍摄上传照片功能,问题重重... 前端代码 $(':file').on('change',function(){ var file = this.files[0]; var url = webkitURL.createObjectURL(file); /* 生成图片 * ---------------------- */ var $img = new Image(); $img.onload = function() { //生成比例 var width = $img.wi

  • JS实现批量上传文件并显示进度功能

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的.然后自己查阅各种资料,经过自己总结,最终完成了这个功能. 如果大家有什么问题可以提出来,一起交流,学习.有什么不对的地方也指出来,我也虚心学习.自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家. 条件:我采用struts2,java ,ajax,FormData实现; 1.实现的逻辑

随机推荐