后端代码

def upload(request):

    if request.method == "GET":

        return render(request,'upload.html')

    if request.method =="POST":

        pass

def upload_file(request):

    request.POST.get('username')

    fafafa = request.FILES.get('fileobj')

    img_path = os.path.join('static/img/',fafafa.name)

    with open( img_path, 'wb') as f:

        for item in fafafa.chunks():

            f.write(item)

    ret = {'code':True,'data':img_path}

    return HttpResponse(json.dumps(ret))

views.py

html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1 {

            position: relative;

            width: 100px;

            height: 30px;

            text-align: center;

            line-height: 30px;

            border-radius: 50%;

        }

        .c2 {

            position: absolute;

            width: 100px;

            height: 30px;

            z-index: 10;

            opacity: 0;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

        }

        .c3 {

            display: inline-block;

            background-color: blue;

            color: white;

            z-index: 9;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

        }

    </style>

</head>

<body>

<div class="c1">

    <input class="c2" type="file" id="file11" name="file1"/>

    <a class="c3">上传</a>

</div>

<h3>原生XMLHttpRequest提交</h3>

<input type="button" value="XML提交" onclick="xhrSunbmit();">

<h3>jquery提交</h3>

<input type="button" value="jquery提交" onclick="jqSunbmit();">

<hr/>

<hr/>

<h3>iframe提交</h3>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        {% csrf_token %}

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fileobj" onchange="changeUpalod();" />

{#        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}

    </form>

<div id="preview"></div>

<script src="/static/jquery.js"></script>

<script src="/static/jquery.cookie.js"></script>

<script>

    function xhrSunbmit() {

        var file_obj = document.getElementById('file11').files[0];

        var fd = new FormData();

        fd.append('username', 'root');

        fd.append('fileobj', file_obj);

        var xhr = new XMLHttpRequest();

        xhr.open('POST', '/upload_file/', true);

        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                var obj = JSON.parse(xhr.responseText);

                console.log(obj);

            }

        };

        xhr.send(fd);

    }

    function jqSunbmit() {

        var file_obj = document.getElementById('file11').files[0];

        var fd = new FormData();

        fd.append('username', 'root');

        fd.append('fafafa', file_obj);

        $.ajax({

            url: '/upload_file/',

            type: 'POST',

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

            data: fd,

            processData: false,  // tell jQuery not to process the data

            contentType: false,  // tell jQuery not to set contentType

            success: function (arg, a1, a2) {

                console.log(arg);

                console.log(a1);

                console.log(a2);

            }

        })

    }

    function changeUpalod(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;

                $('#preview').append(imgTag);

            });

            $('#form1').submit();

        }

 /*   function iframeSubmit(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;

                $('#preview').append(imgTag);

            })

        }*/

</script>

</body>

</html>

upload.html

使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化的更多相关文章

  1. HTML5预览图片、异步上传文件

    注意啦:本文的代码都是以JQuery为示例,jq_开头的变量都是jq对象. 在HTML5中,我们可以在图片上传之前对图片进行预览,就像下面这么做 jq_upload_file.change(funct ...

  2. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  3. android中解析文件的三种方式

    android中解析文件的三种方式     好久没有动手写点东西了,最近在研究android的相关技术,现在就android中解析文件的三种方式做以下总结.其主要有:SAX(Simple API fo ...

  4. 转 Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式   velocitypropertiespath Velocity中加载vm文件的三种方式:    方式一:加载classpath目录下的vm文件 Prope ...

  5. Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式: a.  加载classpath目录下的vm文件 /** * 初始化Velocity引擎 * --VelocityEngine是单例模式,线程安全 * @th ...

  6. 解析Xml文件的三种方式及其特点

    解析Xml文件的三种方式 1.Sax解析(simple api  for xml) 使用流式处理的方式,它并不记录所读内容的相关信息.它是一种以事件为驱动的XML API,解析速度快,占用内存少.使用 ...

  7. Ajax上传数据和上传文件（三种方式）

    Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...

  8. Kafka生产者发送消息的三种方式

    Kafka是一种分布式的基于发布/订阅的消息系统,它的高吞吐量.灵活的offset是其它消息系统所没有的. Kafka发送消息主要有三种方式: 1.发送并忘记 2.同步发送 3.异步发送+回调函数 下 ...

  9. 【spring Boot】spring boot获取资源文件的三种方式【两种情况下】

    首先声明一点,springboot获取资源文件,需要看是 1>从spring boot默认的application.properties资源文件中获取 2>还是从自定义的资源文件中获取 带 ...

随机推荐

  1. [BZOJ4804]欧拉心算：线性筛+莫比乌斯反演

    分析 关于这道题套路到不能再套路了没什么好说的,其实发这篇博客的目的只是为了贴一个线性筛的模板. 代码 #include <bits/stdc++.h> #define rin(i,a,b ...

  2. cin.clear()、cin.sync()

    看机器学习时,发现之前学的C++代码忘了,cin.clear().cin.sync() cin.clear():将流中的所有状态值都重设为有效值 cin.sync():清空流 这个很有意思,如果没有c ...

  3. tp3.2 页面Windows正常 linux异常，页面找不到

    这个问题主要是tp3.2 在读取控制器里的方法时,会把方法自动转为小写, 然后去对应view成找html文件,自然找不到. class textController extends ComContro ...

  4. iOS证书发布推送相关知识科普

    账号种类 1.企业账号 299美刀 -- 可以自己发布App,不能发布到App Store 2.个人/公司账号 99美刀 -- 可以发布到App Store, 不可以自己发布不限安装数量的App 个人 ...

  5. Python的sys.argv用法

    import sys a = sys.argv[:] print("输入的参数为:", a) def train_start(start_time, end_time, selec ...

  6. 简要介绍一下MD5加密的书写

    大家应该多清楚数据的重要性,可以假设一下:一个非常大的企业,因为一个程序员的疏忽大意,没有使用MD5加密,那么可以说这个企业的数据库是非常不安全的,可以轻而易举的的访问你的数据库,并执行任何操作. 下 ...

  7. python对象的引用

    1 利用 * 星号生成二维及二维以上的list时,特别要注意有的量引用是相同的.如果后面要给list赋值,最好不要这样生成list. 可以先这样生成,再打印输出后,粘贴到程序中重新赋值. a = [[ ...

  8. Linux中MySQL5.7设置utf8编码格式步骤

    关于编码问题,真的是弄得我很郁闷,网上找的帖子这方面也很多但都无济于事,晚上终于找到一篇有效的,特此贴上. 转自Ubuntu中MySQL5.7设置utf8编码格式步骤 1.首先打开终端 2.输入mys ...

  9. linux中从一台机器复制文件或目录到另一台机器上linux机器上

    本机IP:x.x.x.1需要拷贝的机器IP:x.x.x.2用户名:ssh_user 目的:将本机中source_path路径下的文件或目录拷贝到另一台机器的destination_path/路径下 复 ...

  10. python2与3版本的编码问题

    python的str默认是ascii编码,和unicode编码冲突,就会报这个标题错误:UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 ...