<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .upload {

            display: inline-block;

            background-color: #ef4300;

            cursor: pointer;

            width: 100px;

            height: 35px;

            text-align: center;

            position: absolute;

            line-height: 35px;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 99;

        }

        .file {

            width: 100px;

            height: 35px;

            text-align: center;

            position: absolute;

            line-height: 35px;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 100;

            opacity: 0;

        }

    </style>

</head>

<body>

<div style="position: relative;width: 100px;height: 35px">

<input type="file" id="i1" name="upload" class="file">

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

</div>

<input type="submit" value="xhr提交" onclick="xhrSubmit();">

<input type="submit" value="ajax提交" onclick="ajaxSubmit();">

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

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

<form action="/xiaoqing/upload_file/" method="post" target="ifm1" enctype="multipart/form-data">

    {% csrf_token %}

    <iframe id="ifm2" name="ifm1"></iframe>

    <input type="file" name="upload">

    <input type="submit" onclick="iframesubmitForm();" value="Form提交" >

</form>

<script>

    var csrftoken = $.cookie('csrftoken');

//第一种上传方式  iframe

      function iframesubmitForm() {

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

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

            var obj= JSON.parse(text);

              console.log(obj);

           })

       }

//第二种上传方法  ajax

    function ajaxSubmit() {

        var fileobj = document.getElementById('i1').files[0];

        console.log(fileobj);

        var fd = new FormData();   //依赖FormData对象

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

        fd.append('upload', fileobj);

        $.ajax({

            url: '/xiaoqing/upload_file/',

            type: 'POST',

            data: fd,

            processData: false,

            cententType: false,

            headers: {'X-CSRFtoken': csrftoken},

            success: function(arg,a1,a2){

                console.log(arg);

                console.log(a1);

                console.log(a2);

            }

        })

    }

//第三种上传方法  xhr对象

    function xhrSubmit() {

        var fileobj = document.getElementById('i1').files[0];

        console.log(fileobj);

        var fd = new FormData();   //依赖FormData对象

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

        fd.append('upload',fileobj);

        var xhr= new XMLHttpRequest();   //创建对象

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

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8'); //POST请求必须设置

        xhr.setRequestHeader('X-CSRFtoken',csrftoken);

        xhr.send(fd);

        xhr.onreadystatechange = function() {

            if(xhr.readyState == 4){

                var obj = JSON.parse(xhr.responseText);   //返回值

                console.log(obj);

            }

        }

    }

</script>

</body>

</html>

三种上传方式

def upload(request):

    return render(request,'upload.html')

def upload_file(request):

    username=request.POST.get('username')

    upload_obj=request.FILES.get('upload')

    print(upload_obj)

    print(username)

    import os

    upload_path=os.path.join('uploads',upload_obj.name)

    with open(upload_path,'wb+') as f:  

        for item in upload_obj.chunks():

            f.write(item)

    ret = {'status':True,'data':request.POST.get('username')}

    return HttpResponse(json.dumps(ret))

views.py

上传预览

如果发送的是文件建议使用iframe 因为他不依赖于其他，而jQuery(依赖FormData),XMLHttpresquest(也依赖FormData)

html

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

    {% csrf_token %}

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

    <input type="file" name="upload" onchange="uploadChange();">

    <input type="submit" onclick="iframesubmitForm();" value="Form提交" >

</form>

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

<script>

 //上传预览

    function uploadChange() {   #绑定onchange事件

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

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

            var obj= JSON.parse(text);

            $('#preview').empty()

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

            #创建img标签 

           img_tag.src='/'+obj.data;$('#preview').append(img_tag);

           })

          $('#form1').submit();  #提交表单

    }

//第三种上传方式预览

      function iframesubmitForm() {

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

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

            var obj= JSON.parse(text);

            $('#preview').empty()

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

            img_tag.src='/'+ obj.data;

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

           })

       }

</script>

views.py:

def upload_file(request):

    username=request.POST.get('username')

    upload_obj=request.FILES.get('upload')

    print(upload_obj)

    print(username)

    import os

    image_path=os.path.join('static/imgs',upload_obj.name)

    # upload_path=os.path.join('uploads',upload_obj.name)

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

        for item in upload_obj.chunks():

            f.write(item)

    ret = {'status':True,'data':image_path}

    return HttpResponse(json.dumps(ret))   #返回image_path路径

上传文件的三种方式xhr,ajax和iframe及上传预览的更多相关文章

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

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

  2. SpringMVC上传文件的三种方式(转)

    直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

  3. SpringMVC上传文件的三种方式

    直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

  4. SpringMVC上传文件的三种方式（转载）

    直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

  5. SpringMVC上传文件的三种方式（转帖）

    /* * 通过流的方式上传文件 * @RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象 */ @Re ...

  6. SpringMVC上传文件的三种方式(待整理...)

    参考链接 http://www.cnblogs.com/fjsnail/p/3491033.html

  7. react-绑定this并传参的三种方式

    绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...

  8. python webdriver api-上传文件的三种方法

    上传文件: 第一种方式,sendkeys(),最简单的 #encoding=utf-8 from selenium import webdriver import unittest import ti ...

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

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

随机推荐

  1. Tomcat性能优化(转载)

    出处:微信订阅号GitChat精品课程 — Tomcat性能优化 Tomcat 简单介绍 Sun 公司创建了第一个 Servlet 容器,即 Java Web Server,但 JWS 只是为了演示 ...

  2. Python中常见的正则表达式符号

    ?  匹配零次或一次前面的分组 *   匹配零次或多次前面的分组 +  匹配一次或多次前面的分组 {n} 匹配n次前面的分组 {n,} 匹配n次或更多次前面的分组 {,m} 匹配零次到m次前面的分组 ...

  3. rtf乱码解决办法

    首先,阐述下rtf,富文本格式文档,目前常用来做模板: 我遇到的问题是rtf中替换后的文本显示是正常的,rtf直接转pdf就不正常了,通过notpad++ 打开后发现rtf本身内容编码是我没有见过的( ...

  4. Python入门（一）数据类型、循环语句

    脚本语言类型: 1.编译型语言:写完代码不能执行,需要先编译     eg:c.c++.c# 2.解释性语言:不需要编译 直接执行                      eg:python.jav ...

  5. 关于python 的http 日常操作

    Http,互联网的基础 .net ,java(springboot),node.js,python 都能非常方便的实现http服务. 现在服务器后台跑着pytorch的模型,想着还是用python来处 ...

  6. pta

    一:实验代码 include <stdio.h> char theValue[10] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j ...

  7. sql server 将两列数据合并到一列 拼接

    create table a( s nvarchar null, ss nvarchar null, f decimal(18,1) null, ff decimal(18,1) null,)INSE ...

  8. JMM - Java内存模型

    内存模型的作用是定义变量的访问规则.包含:实例字段.静态字段.构成数组对象的元素.不包括局部变量和方法参数等线程私有变量. JMM所有变量都在主存,每个线程都有自己的工作内存.线程的工作内存中保存了线 ...

  9. async-await用法

    转载:https://segmentfault.com/a/1190000011526612?utm_source=tag-newest

  10. Envoy 源码分析－－network L4 filter manager

    目录 Envoy 源码分析--network L4 filter manager FilterManagerImpl addWriteFilter addReadFilter addFilter in ...