<!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. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  2. c#数据库事务锁类型

    一.脏读.不可重复读.幻象读的区别   1.脏读:包含未提交数据的读取.例如,事务 a 更改了某行(数据库已发生更改,但尚未提交,有可能发生回滚),事务 b 在事务 a 提交更改之前读取已更改的行.如 ...

  3. 第 9 章 数据管理 - 077 - 跨主机使用 Rex-Ray volume

    跨主机使用 Rex-Ray volume 在docker1上创建mysql容器,并挂载使用mysqldata数据卷 磁盘文件直接挂载在了docker1 上 验证数据 也是存在的 Rex-Ray 可以提 ...

  4. 第一章 Java语言概述1

    1.人机交互有两种方法:一种是图形化界面,一种是命令行方式 2.如何打开命令行:开始-在运行命令行中输入cmd 3.常用的DOS命令: dir(directory):列出当前目录下文件及文件夹 md( ...

  5. JSR107缓存规范

    Java Caching定义了5个核心接口,分别是CachingProvider, CacheManager, Cache, Entry 和 Expiry. CachingProvider定义了创建. ...

  6. pycharm运行Django项目，提示UnicodeDecodeError: 'gbk' codec can't decode byte 0xa6

    确认pycharm编码都是utf-8的情况下,需要修改项目中settings.py 'DIRS': [ ],默认是空,将路径加入即可解决. TEMPLATES = [ { 'BACKEND': 'dj ...

  7. mybatis 动态sql和参数

    mybatis 动态sql 名词解析 OGNL表达式 OGNL,全称为Object-Graph Navigation Language,它是一个功能强大的表达式语言,用来获取和设置Java对象的属性, ...

  8. h5微信支付在微信内页使用微信公众号支付

    由于app的迭代,原本的微信支付是使用原生写的 然后h5这边做交互,现在需要修改使用h5的微信支付,于是就有了现在的这个例子,微信支付其实对于我们前端来说就是调用接口然后,根据链接进行支付,其中有点坑 ...

  9. form表单js提交

    form表单js提交      $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...

  10. istio-opentracing链路追踪方案

    目录 istio-opentracing链路追踪方案 envoy链路追踪 初始化追踪 跟踪上下文信息 istio链路追踪 链路追踪参数 采样率 jaeger istio中jaeger现状 jaeger ...