后端代码

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. jquery even选择器 语法

    jquery even选择器 语法 作用::even 选择器选取每个带有偶数 index 值的元素(比如 2.4.6).index 值从 0 开始,所有第一个元素是偶数 (0).最常见的用法:与其他元 ...

  2. R 常用代码段

    #用来根据不同的细胞来源重新画TSNE图cell_source <-colnames(immune_nobatch) cell_type <- strsplit(cell_source,s ...

  3. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  4. 创建 Smarty 对象

    /* //if (!defined('INIT_NO_SMARTY')) //{ header('Cache-control: private'); header('Content-type: tex ...

  5. HDU1026--Ignatius and the Princess I（BFS记录路径）

    Problem Description The Princess has been abducted by the BEelzebub feng5166, our hero Ignatius has ...

  6. java语言对比，jvm，垃圾回收

    1.java/c++/ruby/python集中语言的对比 java和c++ 1,没有指针 2,没有多继承 3,没有const 4,在实现多态上的区别    tc++里面的虚函数,纯续函数和java里 ...

  7. ASP.NET中调用百度地图API

    1.打开链接http://developer.baidu.com/map/jshome.htm这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开 ...

  8. maven的配置及使用

    Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Apache官网下载maven 解压缩,配置环境变量: path路径:E:\apache-ma ...

  9. gunicorn+nginx配置方法

    对于gunicorn+nginx的配置,理解他们之间的关系很重要,以及最后如何确认配置结果是正确的也很重要 nginx 配置文件: 修改这个配置文件有3个用处: 假设服务器本身的Ip是A称为ip-A, ...

  10. Spring MVC静态资源处理——<mvc:resources /> ||<mvc:default-servlet-handler />

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...