上传文件的三种方式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的大文 ...

随机推荐

业务限流场景简单实现方案：RateLimiter
前因:因为本系统中,有大数据高并发的场景.在向下游系统发送请求的时候,需要限流.否则会造成下游系统的堵塞. 实现方案1: Thread.sleep(ms). 优点:简单粗暴,一行代码搞定缺点:有点l ...
VGG
2019-04-08 13:30:58 VGG模型是2014年ILSVRC竞赛的第二名,第一名是GoogLeNet.但是VGG模型在多个迁移学习任务中的表现要优于googLeNet.而且,从图像中提取 ...
ggplot的boxplot添加显著性 | Add P-values and Significance Levels to ggplots | 方差分析
参考:Add P-values and Significance Levels toggplots 多组比较,挑选感兴趣的显示显著性. data("ToothGrowth") he ...
hbase之认识
进入HBase客户端命令操作界面 $ bin/hbase shell 查看帮助命令 hbase(main):001:0> help 查看当前数据库中有哪些表 h ...
关于a标签的用法总结
onclick的事件被先执行 ,其次是href中定义的(页面跳转或者javascript) 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加 ...
在jsp中如何使用javax.servlet.http.HttpServlet,javax.servlet.GenericServlet, javax.servlet.Servlet
Scratch安装使用教程
一.说明一直听说scratch是一款麻省理工所开发的很好的少儿编程学习工具,一直不是很清楚所谓少儿编程是长什么样所以探究了一下. 二.安装 scratch当前到了3.0版本,3.0版本默认直接是we ...
【Monkey】Monkey稳定性测试常用命令
Monkey稳定性测试常用命令: 1.adb shell monkey n 2.adb shell monkey -p com.android.calculator2 1000 3.adb shel ...
使用idea搭建maven项目，结果spring-mybatis.xml文件报红“Cannot resolve file 'jdbc.properties' less... (Ctrl+F1) Inspection info:Spring XML model validation”
错误如下图: 解决方案: 暂时只是使用右下角的highlightinglevel来屏蔽,拖动到最左边就行了
ClientDataSet使用locate或Filter定位到字段为空值的记录
场景,程序想检查是否存在某个字段的值是空的,如果存在,则不允许增加记录,否则允许增加记录. 解决这个问题,我一开始用了两种错误的方法 if not clientdataset.locate('AFie ...

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

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

随机推荐

热门专题