上传文件的三种方式xhr,ajax和iframe及上传预览

<!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及上传预览的更多相关文章

Ajax上传数据和上传文件（三种方式）
Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...
SpringMVC上传文件的三种方式(转)
直接上代码吧,大伙一看便知这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...
SpringMVC上传文件的三种方式
直接上代码吧,大伙一看便知这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...
SpringMVC上传文件的三种方式（转载）
直接上代码吧,大伙一看便知这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...
SpringMVC上传文件的三种方式（转帖）
/* * 通过流的方式上传文件 * @RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象 */ @Re ...
SpringMVC上传文件的三种方式(待整理...)
参考链接 http://www.cnblogs.com/fjsnail/p/3491033.html
react-绑定this并传参的三种方式
绑定this并传参的三种方式在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...
python webdriver api-上传文件的三种方法
上传文件: 第一种方式,sendkeys(),最简单的 #encoding=utf-8 from selenium import webdriver import unittest import ti ...
前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

随机推荐

Ubuntu 18.04.1安装IntelliJ IDEA
1.下载安装包下载地址:https://www.jetbrains.com/idea/download/#section=linux 2.下载完成后,解压到/opt目录 .tar.gz -C /op ...
Docker镜像加速器配置
一.为什么要配置Docker镜像加速器因为我们默认pull的docker镜像是从Docker Hub来下载,由于其服务器在国外,速度会比较慢.因此我们可以配置成国内的镜像仓库,这样可以加速镜像的上传 ...
Mac安装6.1.2版本Elasticsearch及优化配置实践
1,Mac上安装(指定java8) brew cask install java8 vim .base_profile 文件内容: JAVA_HOME=/Library/Java/JavaVirtua ...
hdoj3247
注意fail时怎么走. #include <iostream> #include <cstdio> #include <cmath> #include <al ...
关于vue中this.attr代替this.data.attr访问的原理
请看如下例子: var obj = { name:"zhuwei", age:18 } function Person(data){ this.data = data; } var ...
erlang下lists模块sort（排序）方法源码解析(二)
上接erlang下lists模块sort(排序)方法源码解析(一),到目前为止,list列表已经被分割成N个列表,而且每个列表的元素是有序的(从大到小) 下面我们重点来看看mergel和rmergel ...
Altium Designer添加元件库文件
1 默认元件库路径 C:\Users\Public\Documents\Altium\AD 10.0.0.20340\Library 2 创建元件原理图库图2.1 新建schlib 图2.2 绘制元 ...
linux上docker安装centos7.2
1.安装 docker pull centos:7.2.1511 2.启动镜像 docker run -d -i -t <IMAGE ID> /bin/bash 3.进入容器 docker ...
python pyqt4问题记录
在python中在终端中使用pip无法完成pyqt4的安装. 在官网下载相应的最新文件,在cmd中使用命令也无法实现安装最终发现python最新的版本(现在已是3.7版本),无法安装. 解决办法为将 ...
Ajax、Flash优缺点
Ajax的优势:1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发.可搜索性普通的文本网页会更有利于SEO.文本内容是搜索引擎容易检索的,而繁琐的swf字节码却是搜索引擎不愿触及的.虽然G ...

上传文件的三种方式xhr,ajax和iframe及上传预览

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

随机推荐

热门专题