后端代码

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

    T3构造图

  2. BZOJ 4417 Luogu P3990 [SHOI2013]超级跳马 (DP、矩阵乘法)

    题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=4417 (luogu)https://www.luogu.org/prob ...

  3. Spring Cloud Stream教程（二）主要概念

    Spring Cloud Stream提供了一些简化了消息驱动的微服务应用程序编写的抽象和原语.本节概述了以下内容: Spring Cloud Stream的应用模型 Binder抽象 持续的发布 - ...

  4. Oracle数据库链接超级慢或者总提示链接超时

    Centos6  今天tomcat应用程序链接数据库总提示链接超时,客户端工具通过tnsnames连接数据库实例进行操作也超级慢, 实在无法忍受, 重启实例试试吧,重启了还是不好使,还是很慢很慢,无比 ...

  5. 使用Runnable接口创建线程池

    步骤: 创建线程池对象创建 Runnable 接口子类对象提交 Runnable 接口子类对象关闭线程池实例: class TaskRunnable implements Runnable{ @Ove ...

  6. IFG以太网帧间隙

    交换机的线速 描述交换机性能可以使用“线速”这个概念,那它是什么意思呢?所谓的线速是指经过交换机处理的理想状态下最大数据率.描述数据率可以用bps(bit per second)和mpps(milli ...

  7. House_of_Force-ctf-bcloud

    2016 bctf bcloud 下载: https://pan.baidu.com/s/1e-fvhaOJKzBQMxlrweLznw 提取码:ded5 放入ida中首先定位到 main()-> ...

  8. pycharm运行测试用例遇到错误：ZeroDivisionError: float division by zero的原因

    运行测试用例报错:ZeroDivisionError: float division by zero 一般是因为测试用例模块命名没有以test开头,导致unittest找不到用例,用例总数为0,导致除 ...

  9. 操作系统 - Windows操作系统 - WindowsXP - 安装|命令|使用 - 汇总

    开启ipc$ net share ipc$ 开启admin$ net share admin$ 端口 开放445端口对外访问系统层面:regedit -> 搜索HKEY_LOCAL_MACHIN ...

  10. 1.parrot os 3.5-----nmap-----katoolin--zenmap

    源:https://www.youtube.com/watch?v=LpM1KooILRc&list=PLBf0hzazHTGOEuhPQSnq-Ej8jRyXxfYvl&index= ...