后端代码

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. SQL基础测试

    SQL 测验 结果:20/20 您的回答: 1.SQL 指的是? 您的回答:Structured Query Language 2.哪个 SQL 语句用于从数据库中提取数据? 您的回答:SELECT ...

  2. DFS-全排列

    void dfs(int x) { if(x>n) { ;i<=n;++i) cout<<a[i]; cout<<endl; return; } ;i<=n; ...

  3. [LightOJ1008]Fibsieve`s Fantabulous Birthday 题解

    前言 扫了一眼网上的题解,都是找规律. 估计就我一个蒟蒻在打二分. 题解 设一个" ┐"形为一层. 我们二分查找该数在那一层,然后就可以直接计算它的位置了. 代码 #include ...

  4. nginx typecho config

    ## # You should look at the following URL's in order to grasp a solid understanding # of Nginx confi ...

  5. 买SD卡和TF卡要买U3和A2协议的

    A3 最低平稳写入30M/s

  6. from sklearn import datasets运行错误：ImportError: DLL load failed: 找不到指定的程序------解决办法

    在运行集成学习的多数投票分类代码时,出现错误 from sklearn import datasets from sklearn.model_selection import cross_val_sc ...

  7. Deepin 系统下设置Apache虚拟主机站点

    1,在 var/www/html 文件夹中创建一个文件夹,命名为 a ,用来作为我们的PHP项目文件夹. 2,找到 etc/apache2/sites-available 文件夹,在文件夹中创建一个站 ...

  8. 【linux】cp 批量复制文件

    [需求]: 有2个文件夹a,b,现在需要将a文件夹下的所有文件(aa.py,a2.py,a3.py)都复制到b文件夹(空文件夹) [解决办法]: 首先想到的是使用正则表达式,但是发现在linux中,只 ...

  9. Linux_系统时间管理

    目录 目录 时间管理 date指令 系统时间设置timedatectl指令 本地时间同步 时间服务器NTP RHEL6 RHEL7 计划任务 一次性计划任务 at指令 限制用户建立一次性计划任务 周期 ...

  10. 阶段3 1.Mybatis_12.Mybatis注解开发_7 Mybatis注解开发一对多的查询配置

    一对多的配置,一个用户对应多个账户 需要在Accout里面增加根据用户的uid查询的方法 在user里面指定子一对多的查询配置 换行显示 测试 把这里注销掉.测试延迟加载,代码注释掉后,延迟加载就没有 ...