关于django中input标签中file类型以及开路由
0825自我总结
关于django中input标签中file类型
1.input提交图片实时展示
<img src="/static/img/default.png" width="80" height="80" style="margin-left: 20px" id="id_img">
<input type="file" name="file" id="id_file">
<script>
//当该控件发生变化,响应该事件
$("#id_file").change(function () {
//alert(1)
//取到文件对象
var file = $("#id_file")[0].files[0]
//放到img控件上,借助于filereader 中间的东西,文件阅读器
//生成一个文件阅读器对象赋值给filereader
var filereader = new FileReader()
//把文件读到filereader对象中
//读文件需要时间,需要文件读完再去操作img
//如果没这一步操作下面不一定变化
filereader.readAsDataURL(file)
filereader.onload = function () {
$("#id_img").attr('src', filereader.result)
}
})
</script>
2.对于后台传输与接收
1.传输
<script>
xxxxxxxxxx #就是就是触发传图片的时间,下面核心的aja**-
$.ajax({
url: '/register/',
type: 'post',
data: {'img':$("#id_file")[0].files[0]},
success: function (data){
}
})
</script>
2.接收
#核心代码
img=request.FILES.get('img')
#如果设置中没有设置默认存储在avatar文件下
#对于存储位置设置需要在setting中设置
#加这两句,以后再上传的图片,都放在media文件夹下
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
3.路由
#开路由,直接通过URL能访问源码
from django.views,static import serve
from django.conf import settings #要载入他的配置文件
urlpatterns = [
url(r'^media/(?P<path>.*)',serve,{'document_root':'文件的根路径'}),
]
#他会进行拼接,根据传的path拼接再文件的根路径后,然后找到文件
关于django中input标签中file类型以及开路由的更多相关文章
- 修改input标签type=file类型的文字
<form name="form" id="form" method="post" enctype="multipart/f ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- HTML中Meta标签中http-equiv属性小结
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中Meta标签中http-equiv属性
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- input标签中的name
<input>标签是java web的jsp页面中最常用的标签,特别是用来在页面和servlet中传递内容, 但是我们看到<input>标签中有很多内容,这边我们只提一下主要的 ...
- HTML中input标签的alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- [转]对form:input标签中的数字进行格式化
原文地址:https://blog.csdn.net/qq_29662201/article/details/80708373 数字进行格式化(保留2位小数) 单独使用<fmt:formatNu ...
- 【HTML】input标签中alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- HTML中input标签maxlength属性的妙处
HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...
随机推荐
- 小程序 请求Promise简单封装
最近做小程序在调用后台接口的时候感觉总写很长一串,很冗杂.非常想念vue中promise封装的写法,于是自己初步封装了一下. 1.url 接口地址 2.headers请求头 3. params 请求参 ...
- .Net基础篇_学习笔记_第三天_Convert类型转换
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- JAVA截取后String字符串六位字符
public static void main(String[] args){ String cellphone="; String pwd = cellphone.substring(ce ...
- SSM整合activiti框架
一:WorkFlow简介 1:什么是工作流工作流(Workflow),指“业务过程的部分或整体在计算机应用环境下的自动化”.是对工作流程及其各操作步骤之间业务规则的抽象.概括描述.在计算机中,工作流属 ...
- 从原理到场景 系统讲解 PHP 缓存技术
第1章课程介绍 此为PHP相关缓存技术的课堂,有哪些主流的缓存技术可以被使用? 第1章 课程介绍 1-1课程介绍1-2布置缓存的目的1-3合理使用缓存1-4哪些环节适合用缓存 第2章 文件类缓存 2- ...
- Elastic Stack 笔记(六)Elasticsearch5.6 搜索详解
博客地址:http://www.moonxy.com 一.前言 Elasticsearch 主要包含索引过程和搜索过程. 索引过程:一条文档被索引到 Elasticsearch 之后,默认情况下 ES ...
- 02 jvm简介
声明:本博客仅仅是一个初学者的学习记录.心得总结,其中肯定有许多错误,不具有参考价值,欢迎大佬指正,谢谢!想和我交流.一起学习.一起进步的朋友可以加我微信Liu__66666666 这是简单学习一遍之 ...
- 53 (OC) 皮肤切换
1:添加皮肤 1.1:iOS皮肤切换方案 http://www.cocoachina.com/ios/20171012/20762.html 1.2:整合 iOS几种换肤思路和demo https:/ ...
- 微信支付JSAPI支付
1.介绍 JSAPI支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付.应用场景有: ◆ 用户在微信公众账号内进入商家公众号,打开某 ...
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...