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

而此按钮一般是一张图片覆盖了一个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. redis Lua学习与坑

    1.在写lua脚本往redis中添加zadd 有序集合的时候一直报 "value is not a valid float"的错误,经过查询相关资料,最后发现,是顺序写反了. 相关 ...

  2. [LeetCode] 10. 正则表达式匹配

    题目链接:https://leetcode-cn.com/problems/regular-expression-matching/ 题目描述: 给定一个字符串 (s) 和一个字符模式 (p).实现支 ...

  3. 深入理解Fabric环境搭建的详细过程

    博主之前的文章都是教大家怎么快速的搭建一个Fabric的环境,但是其中大量的工作都隐藏到了官方的脚本中,并不方便大家深入理解其中的过程,所以博主这里就将其中的过程一步步分解,方便大家! 前面的准备工作 ...

  4. Django之 Form和ModelForm组件

    01-Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用 ...

  5. 爬取页面InsecureRequestWarning: 警告解决笔记

    InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is s ...

  6. 关于token登录逻辑分析

    前言: token登录上一家公司也写过,迷迷糊糊的, 现在做一个APP,需求为每次调用接口都会传token,登录注册等特殊的除外, 逻辑整理一下还是比较简单的 主要的问题还是,如何在框架中找到较好的插 ...

  7. JQuery 选择某个td中第二个a标签 控制特殊样式

    a标签没有disabled属性,那么当我们想禁用a标签的点击事件的时候按照下面方法设置. 下面是html代码: <a id="entry” class="entry" ...

  8. window.onload 与 $(document).ready() 的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

  9. 转：Flutter动画一

    1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才会觉得炫酷.移动端的动画库有非常的多,例如iOS上的Pop.web端的animate.css.Android端的An ...

  10. 一、Redis-NoSQL数据库

    转载:[https://blog.csdn.net/aaronthon/article/details/81714528 ] [https://www.cnblogs.com/StanleyBlogs ...