后端代码

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. Bootstap

    Bootstrap框架 Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序 ...

  2. HDU 2923 Relocation（状压dp+01背包）

    题目代号:HDU2923 题目链接:http://poj.org/problem?id=2923 Relocation Time Limit: 1000MS Memory Limit: 65536K ...

  3. 利用word宏功能一键导出数据库表结构

    前言: 需求是: 为了完成<数据库设计文档>中的表结构展示,需要导出所有的表结构,包括字段名.长度.注释等必要标题. 数据库:MySQL 我选择的方法是——用word的宏功能导出.很多博客 ...

  4. shell变量与运算

    shell变量与运算 @(0003 shell编程) 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$号,只有引用变量的值时才使用$号.也就是说在内存中,标记变量的变量名称是str,而不 ...

  5. wannalfy 挑战赛7 F Masha与老鼠(贪心+dp)

    链接:https://www.nowcoder.net/acm/contest/56/F   时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K 6 ...

  6. tp32-layuicms项目介绍

    项目结构:  项目截图: 登录页 文章列表 码云仓库:https://gitee.com/lim2018/tp32-layuicms

  7. fedora14 - 22安装yum源的最终所有唯一文档

    yum的配置包括3个地方 /etc/yum中主要是yum的插件: /etc/yum/pluginconf.d 目录下配置yum的插件的启用或禁用等... /etc/yum.conf这个是yum的主要配 ...

  8. 【Python】—— 获取函数内部变量名称

    原文出处: https://blog.csdn.net/maixiaochai/article/details/88693507 关键语句: func_vars = func.__code__.co_ ...

  9. 郝斌_GUI

    85事件处理 import java.awt.Button; import java.awt.Frame; import java.awt.event.ActionEvent; import java ...

  10. Ehlib好用的版本

    EhLib 6.2