当我们选中文件,点击上传时即可。

而此按钮一般是一张图片覆盖了一个input标签而以。基于这个原理我们可以定制自己喜欢的样式

<div style="text-align: center; margin-top: -80px" _v-6d94aab5="">

    <div style="width: 120px; height: 120px; border-radius: 60px; overflow: hidden; margin: 0 auto" _v-6d94aab5=""><img

            class="newImg" width="100%" alt="" _v-6d94aab5=""

            src="//hcdn1.luffycity.com/static/frontend/head_portrait/logo@2x.png?t=1527068146.672148">

        <div class="camera-icon" _v-6d94aab5="" style="display: none;"></div>

    </div>

    <span class="user-name" _v-6d94aab5="">Ace</span> <span class="user-job" _v-6d94aab5="">石家庄市 | 实习生</span>

    <p class="user-word" _v-6d94aab5=""></p>
</div>

当我们生成一个form表单时

要注明：

<form action="/upload.html" method="POST" enctype="multipart/form-data">

而在后端获取上传的文件时：需要通过request.FILES.get("这里是前端发送时文件的值")

例如：

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

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

        # img是对象（文件大小，文件名称,文件内容。。。）

        print(img.name)

        print(img.size)

        f = open(img.name, 'wb')

        for line in img.chunks():

            f.write(line)

        f.close()

利用FormData　　

FormData是什么呢？

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意：下文中的几个需要解释的
$("#upload") 拿到的是一个集合

$("#upload")[0]  就是一个dom对象

$("#upload")[0].files   拿到的是一个filelist

$("#upload")[0].files[0]  拿到的是当前最近的文件对象

要是使用FormData一定要加上：

一定要加上：

　　contentType：false 
　　processDate：false #不做预处理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width">

    <title>Title</title>

</head>

<body>

<p>姓名<input type="text" name="username"></p>

<p>头像<input type="file" id="upload"></p>

<p><button class="btnnn">提交</button><span class="tishi"></span></p>

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

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>

    $(".btnnn").click(function () {

         var formData=new FormData();

        formData.append("username",$(":text").val());

        formData.append("file",$("#upload")[0].files[0]);

        $.ajax({

            url:"/get_upload/",

            type:"POST",

            headers:{"X-CSRFToken":$.cookie('csrftoken')},

            data:formData,

            contentType:false,

            processData:false,

            success:function (data) {

                $(".tishi").html("上传成功")

            }

        })

    })

</script>

</body>

</html>

　　

Form -- 文件上传的更多相关文章

  1. Day21 Django之Form文件上传、原生Ajax和实现抽屉实例

    一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...

  2. form文件上传，防止页面刷新

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上传 ...

  3. form里面文件上传并预览

    其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的 ...

  4. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  5. asp.net mvc下文件上传

    典型的文件上传表单 <form action="/File" enctype="multipart/form-data" method="pos ...

  6. MVC文件上传与下载

    MVC文件上传与下载 MVC文件上传与下载 想想自己从毕业到工作也有一年多,以前公司的任务的比较重,项目中有的时候需要用到什么东西都去搜索一下,基础知识感觉还没有以前在学校中的好.最近开始写博客,真的 ...

  7. SpringMVC源码分析--文件上传

    SpringMVC提供了文件上传的功能,接下来我们就简单了解一下SpringMVC文件上传的开发及大致过程. 首先需要在springMVC的配置文件中配置文件上传解析器 <bean id=&qu ...

  8. （转）Spring文件上传,包括一次选中多个文件

    背景: http://www.cnblogs.com/lixuwu/p/8495275.html已经实现了单文件的上传和下载,多文件的上传是另一种情景,这里记录下来 实现过程 先说前台. 运行以后就是 ...

  9. tornado结合前端进行文件上传

    在表单中我们获取用户提交的数据,使用的是get_argument,复选框使用的是get_arguments,但是文件的不一样,文件的使用request.files. form文件上传 html代码: ...

随机推荐

  1. 复制命令(COPY)

    COPY 命令: // 描述: 将一个或多个文件从一个位置复制到另一个位置. ### 注意:如果想复制文件夹,请使用 XCOPY . // 语法:  copy [/a] [/b] [/d] [/v] ...

  2. gitlab-server环境搭建

    1.安装GitLab的需求 操作系统 受支持的Unix衍生版 Ubuntu Debian CentOS Red Hat Enterprise Linux (使用CentOS的包和命令) Scienti ...

  3. Scrapy案例01-爬取传智播客主页上的老师信息

    目录 1. 新建scrapy项目 2. 爬虫文件: 2.1. 查看需要爬取内容存在哪里: 2.2. 设置item需要保存的数据变量 2.3. 创建爬虫文件 2.4. 保存数据 2.5. yield的用 ...

  4. 【题解】P1119 灾后重建

    题目地址 理解Floyed的本质 Floyed的本质是动态规划. 在地K次循环中,Floyed算法枚举任意点对(X,Y),在这之前,K从未做过任何点对的中点.因此,可以利用K为中转的路径长度更新. 在 ...

  5. 好程序员分享ApacheSpark常见的三大误解

    误解一:Spark是一种内存技术 大家对Spark最大的误解就是其是一种内存技术(in-memorytechnology).其实不是这样的!没有一个Spark开发者正式说明这个,这是对Spark计算过 ...

  6. mybatis 错误

    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.TooManyR ...

  7. Spring Security（三十）：9.5 Access-Control (Authorization) in Spring Security

    The main interface responsible for making access-control decisions in Spring Security is the AccessD ...

  8. 【洛谷】【二分答案+最短路】P1462 通往奥格瑞玛的道路

    在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目背景 [题目描述:] 在艾泽 ...

  9. openstack搭建之-cinder配置（12）

    一. base节点配置 mysql -u root -proot CREATE DATABASE cinder; GRANT ALL PRIVILEGES ON cinder.* TO 'cinder ...

  10. python基础概念（转）

    基础回顾: 1.集合 集合有2个重要作用:关系测试(并集,差集,交集)和去重. 2.文件编码 2.7上默认文件编码是ASCII码,因为不支持中文,就出了GB2312,在2.7上要支持中文就必须申明文件 ...