实现文件上传的多种方法

淩亂°似流年 2021-12-15 02:19 282阅读 0赞

# 实现文件上传的多种方法 #

# 一、Form表单上传 #

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>上传文件</title>
    </head>
    <body>
    <form action="/update.html/" method="POST" enctype="multipart/form-data">
            {% csrf_token %}
    
            <input type="text" name="user">
    
            <div style="position:relative;">
                 <a>选择文件</a>
                <input type="file" name="img" style="opacity:0;position:absolute;top:0;left:0;height:16px;width:64px;">
            </div>
            <input type="submit" value="提交">
        </form>
    </body>
    </html>

def update(request):
        if request.method=="GET":
            return render(request,'update.html')
        else:
            img=request.FILES.get('img')
            if img:
                print(img.name)
                print(img.size)
                f = open(img.name, "wb")
                for line in img.chunks():
                    f.write(line)
                f.close()
                return HttpResponse('上传成功')
            else:
                return HttpResponse('选择上传文件')

# 二、AJAX上传 #

## HTML - XMLHttpRequest ##

获取数据：
    var fileObj = document.getElementById("img").files[0];
    
    封装数据：
    var form = new FormData();
     form.append("k1", "v1");
     form.append("fff", fileObj);
    注意：FormData是个用来封装数据的。
    
    创建XMLHttpRequest:
    var xhr = new XMLHttpRequest();
    
    发送数据：

xhr.open("post", '/index', true);
     xhr.send(form);

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="file" id="img" />
        <input type="button" οnclick="UploadFile();" />
        <script>
            function UploadFile(){
                var fileObj = document.getElementById("img").files[0];
    
                var form = new FormData();
                form.append("k1", "v1");
                form.append("fff", fileObj);
    
                var xhr = new XMLHttpRequest();
                xhr.open("post", '/index', true);
                xhr.send(form);
            }
        </script>
    </body>
    </html>
    
    HTML - XMLHttpRequest

## HTML - jQuery ##

1.这里使用ajax进行数据提交
    
    2.需要加上这两条
     processData: false,  // tell jQuery not to process the data
     contentType: false,  // tell jQuery not to set contentType

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="file" id="img" />
        <input type="button" οnclick="UploadFile();" />
        <script>
            function UploadFile(){
                var fileObj = $("#img")[0].files[0];
                var form = new FormData();
                form.append("k1", "v1");
                form.append("fff", fileObj);
    
                $.ajax({
                    type:'POST',
                    url: '/index',
                    data: form,
                    processData: false,  // tell jQuery not to process the data
                    contentType: false,  // tell jQuery not to set contentType
                    success: function(arg){
                        console.log(arg);
                    }
                })
            }
        </script>
    </body>
    </html>
    
    HTML - jQuery

## HTML - iframe ##

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form id="my_form" name="form" action="/index" method="POST"  enctype="multipart/form-data" >
            <div id="main">
                <input name="fff" id="my_file"  type="file" />
                <input type="button" name="action" value="Upload" οnclick="redirect()"/>
                <iframe id='my_iframe' name='my_iframe' src=""  class="hide"></iframe>
            </div>
        </form>
    
        <script>
            function redirect(){
                document.getElementById('my_iframe').onload = Testt;
                document.getElementById('my_form').target = 'my_iframe';
                document.getElementById('my_form').submit();
    
            }
            
            function Testt(ths){
                var t = $("#my_iframe").contents().find("body").text();
                console.log(t);
            }
        </script>
    </body>
    </html>

# 演示图片上传功能（iframe+From） #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        {% load staticfiles %}
    </head>
    <body>
    
    
    
    <script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script>
        <iframe style="" id="iframe" name="ifra"></iframe>
        <form id="fm" action="/upload_img.html/" method="post" enctype="multipart/form-data" target="ifra">
            <input type="file" name="File" onchange="uploadFile();">
    
    
        </form>
        <h3>预览</h3>
            <div id="preview">
    
            </div>
    
    
    
        <script>
           function uploadFile(){
    
            document.getElementById('iframe').onload=reloadIframe;
            document.getElementById('fm').submit();
    
           }
    
           function reloadIframe(){
            var content=this.contentWindow.document.body.innerHTML;
            var obj=JSON.parse(content);
            console.log(obj);
            var tag=document.createElement('img');
    
            tag.src='http://127.0.0.1:8080/'+obj.data;
            console.log(obj.data);
            console.log(tag.src);
            $('#preview').empty().append(tag);
           }
        </script>
    
    
    </body>
    </html>

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

from django.shortcuts import render, HttpResponse, redirect
    import json
    import os
    import uuid
    
    def upload_img(request):
    
    
        nid = str(uuid.uuid4())
        ret={
         'status':True,'data':None,'message':None}
        obj=request.FILES.get('File')
    
        file_path=os.path.join('static',nid+obj.name)
        print(file_path)
        print(1)
        f=open(file_path,'wb')
        for line in obj.chunks():
            f.write(line)
        f.close()
        ret['data']=file_path
        return HttpResponse(json.dumps(ret))

![1477786-20190314001848701-1531005953.png][]

![1477786-20190314001855538-1567626297.png][]

转载于:https://www.cnblogs.com/-wenli/p/10527203.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211214/99e8c179f3884970be4e7a2f79a94939.png
[1477786-20190314001848701-1531005953.png]: /images/20211214/9e2c91a946ff4c86914d50681701195c.png
[1477786-20190314001855538-1567626297.png]: /images/20211214/6ab45a1b4ae348ffab41a8b90d621411.png