zoukankan      html  css  js  c++  java
  • 上传文件的三种方式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;
                 100px;
                height: 35px;
                text-align: center;
                position: absolute;
                line-height: 35px;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                z-index: 99;
    
            }
    
            .file {
    
                 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; 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路径
  • 相关阅读:
    设计模式(十):享元模式
    设计模式(九):装饰者模式
    设计模式(八):组合模式
    设计模式(七):桥接模式
    设计模式(六):适配器模式
    设计模式(一)工厂模式(补) -- 理解记忆方式
    [转] 本地项目上传github (新项目 / 旧项目)
    设计模式(五):外观模式
    php语言搭建nginx反向代理,负载均衡常遇到的问题
    linux tail命令用法
  • 原文地址:https://www.cnblogs.com/sunhao96/p/9025704.html
Copyright © 2011-2022 走看看