<!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. .net core json序列化 long类型转化成字符串

    实现类 using System; using System.ComponentModel; using System.Linq; using Newtonsoft.Json; namespace H ...

  2. selenium “could not be scrolled into view”

    学习selenium对话框处理出现错误 a.py内容: from selenium import webdriver import timedriver = webdriver.Firefox()dr ...

  3. 一张图了解Spring Cloud微服务架构

    Spring Cloud作为当下主流的微服务框架,可以让我们更简单快捷地实现微服务架构.Spring Cloud并没有重复制造轮子,它只是将目前各家公司开发的比较成熟.经得起实际考验的服务框架组合起来 ...

  4. Error during generated code invocation: com.intellij.debugger.engine.evaluation.EvaluateException: Method threw 'java.lang.IllegalAccessError' exception.

    场景描述: 再从该数据库中读取数据进行处理的时候,需要将某个字段加入到一个动态的map中,然后需要对该map进行filter过滤,在执行过滤方法的时候报错 Error during generated ...

  5. Nginx缓存

    一.基于proxy_cache的缓存 worker_processes ; events { worker_connections ; } http { include mime.types; def ...

  6. EF| CodeFirst 代码先行

    CodeFirst 实例一 1.新建一个WebForm项目,名字就叫CodeFirstEF 2:在项目中添加引用EF所需要的5个核心类库:(如果找不到这几个类库,可以新建基于数据库的ADO.NET 实 ...

  7. SWUST OJ(1035)

    定位顺序表中最大和最小值 #include<iostream> #include<cstdlib> using namespace std; int main(int argc ...

  8. MongDB 批量更新

    最近公司在使用mongodb.  批量更新的语句为: db.table.update(  {'wo': {$in: [ "123", "456"]}}, {$s ...

  9. 苹果手机的SB系列（1）听不懂人话的sir

    写在前面,因手买错了(至于怎么买错了不解释)手机才买了一个苹果,价格不扉,但实在让人很不爽．记下了SB的点点． Sir听不懂人话,我让他查非洲安哥拉的时间,却屡次返回美国安哥拉洲的时间,很自恋．

  10. 构建微服务：Spring boot 入门篇

    什么是Spring Boot Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而 ...