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

而此按钮一般是一张图片覆盖了一个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. 【Teradata SQL】创建数据库和表

    1.数据库perm大小为10G Create database testbase as perm=10E9,spool=10E9; 2.创建物理表 create multiset table stg( ...

  2. Windows Service 学习系列（三）——循环引擎 ICycleEngine

    摘要:转载:https://www.cnblogs.com/zhuweisky/archive/2009/09/01/1557792.html#undefined 1.缘起: 有些系统需要每隔一段时间 ...

  3. Java base64转图片

    import sun.misc.BASE64Decoder; import java.io.FileOutputStream; import java.io.OutputStream; public ...

  4. JDK内置工具使用（jps、jstack、jmap、jstat）

    一.JPS 1.jps -lvm:用于查看当前机器上已装载的jvm 二.jstackjstack命令主要用来查看Java线程的调用堆栈的,可以用来分析线程问题(如死锁) 1.jstack -l pid ...

  5. AtCoDeerくんと選挙速報 / AtCoDeer and Election Report AtCoder - 2140 （按比例扩大）

    Problem Statement AtCoDeer the deer is seeing a quick report of election results on TV. Two candidat ...

  6. MySQL的运算符及其优先级

    +++++++++++++++++++++++++++++++++++++++++++标题:MySQL的常见运算符时间:2019年2月23日内容:MySQL的常见运算符重点:主要讲述MySQL常见运算 ...

  7. 家庭记账本小程序之查（java web基础版六）

    实现查询消费账单 1.main_left.jsp中该部分,调用search.jsp 2.search.jsp,提交到Servlet中的search方法 <%@ page language=&qu ...

  8. PHP中高级进阶之路

    纯自己总结,认为作为一个中高级的PHP程序员,应该必修的内容,以此鞭策自己,努力向着这个方向前进. 1. 技能自问 1) PHP7开始使用了吗?它的一些新特性? 2) 数据库分库分表的实现 3) My ...

  9. [转帖]Go中的下划线

    Go中的下划线 https://blog.csdn.net/wanglei9876/article/details/50475864 下划线的作用: 在import 时 是仅引入 init 函数 在正 ...

  10. 使用jquery中$.each()方法来循环一个数据列表

    定义和用法 jQuery.each() 函数用于遍历指定的对象和数组. 语法 $.each( object, callback ) 参数 描述 object Object类型 指定需要遍历的对象或数组 ...