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

而此按钮一般是一张图片覆盖了一个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. centos7下kubernetes（12。kubernetes-service）

    Service:定义了一个服务得访问入口地址,前端的应用通过这个入口地址访问其背后得一组由pod副本组成的集群实例: service与后端的pod副本集群之间则是通过label selector来实现 ...

  2. 《通过C#学Proto.Actor模型》之Persistence

    Actor是有状态的,当每一步执行失败后,返回失败地方继续执行时,希望此时的状态是正确的,为了保证这一点,持久化就成了必要的环节了. Proto.Actor提供了三种方式执久化: Event Sour ...

  3. SkylineGlobe 7.0.1 & 7.0.2版本Web开发 如何实现土方量计算

    土方量计算,或者叫填挖方计算,体积计算,Skyline在很早的版本中就提供了这个的功能. 目前的软件版本,不仅仅可以对地形修改对象进行土方量计算,还可以在FLY工程中导入DEM数字高程模型数据,计算不 ...

  4. 3.HttpSession

    1 HttpSession概述 1.1 什么是HttpSesssion javax.servlet.http.HttpSession接口表示一个会话,我们可以把一个会话内需要共享的数据保存到HttSe ...

  5. 并发编程-JUC之Atomic

    概述: 早期的JDK版本中,如果要并发的对Integer.Long.Double之类的Java原始类型或引用类型进行操作,一般都需要通过锁来控制并发,以防止数据不一致.JUC-Atomic原子类位于j ...

  6. React 合并行 RowSpan

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今儿分享一篇关于React Table 组件合并单元行的方法! 实例效果如下: 原则就是遇到相同的供方名称,就要做行合并! 思路如下:后端计算合并的 ...

  7. Python之find命令中的位置的算法

    find("s",a,b)    #s表示的是一个子序列,a表示的是检索的起始位置,b表示的是检索的终止位置,ab可有可无 test = "abcdefgh" ...

  8. JAVA关键字及作用

    ---恢复内容开始--- Java关键字及其作用 一. 总览: 访问控制 private protected public 类,方法和变量修饰符 abstract class extends fina ...

  9. AngularJS 1.x系列：AngularJS过滤器（4）

    1. AngularJS过滤器(Filter)使用方法 AngularJS中过滤器(Filter)主要功能是格式化数据. AngularJS过滤器使用方法有3种: ◊ 在表达式{{}}中使用 ◊ 在指 ...

  10. MySQL中 in和exists的区别

    A表: 100条数据 , B: 10条数据 select * from A where id in ( select aid from B ) 先执行括号里面的查询,然后执行外面,总共需要查询的次数的 ...