Python Web框架篇:Django文件上传

上传方式:

- Form表单上传文件
- Ajax上传文件
- 基于form表单和iframe自己实现ajax请求

1,创建项目

Python Web框架篇:Django文件上传_第1张图片

2,settings配置(注册app01,static路径等等这些)及url添加(略过)

3,views视图函数

form的视图收到了在request.FILES中的文件数据。从上述form来的数据可以通过request.FILES['file']来存取。
特别注意的是,只有当request方法是POST,且发送request的

有属性enctype="multipart/form-data"时,request.FILES中包含文件数据,否则request.FILES为空。

from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json

import os
def upload(request):
if request.method == 'GET':
img_list = models.Img.objects.all()
return render(request,'upload.html',{'img_list': img_list})
elif request.method == "POST":
user = request.POST.get('user')
fafafa = request.POST.get('fafafa')

obj = request.FILES.get('fafafa')
# print(obj.name,obj.size) #读取文件名称和大小,返回后台
# print(user,fafafa)
file_path = os.path.join('static','upload',obj.name)
f = open(file_path, 'wb')
for chunk in obj.chunks():
f.write(chunk)
f.close()
models.Img.objects.create(path=file_path)

ret={'status':True,'path':file_path}
return HttpResponse(json.dumps(ret))

4,文件操作方法

obj.read():从文件中读取整个上传的数据,这个方法只适合小文件;

obj.chunks():按块返回文件,通过在for循环中进行迭代,可以将大文件按块写入到服务器中;

obj.multiple_chunks():这个方法根据myFile的大小,返回True或者False,当myFile文件大于2.5M(默认为2.5M,可以调整)时,该方法返回True,否则返回False,因此可以根据该方法来选择选用read方法读取还是采用chunks方法

obj.name:这是一个属性,不是方法,该属性得到上传的文件名,包括后缀,如123.exe;

obj.size:这也是一个属性,该属性得到上传文件的大小。

5.1 form 上传

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <form method="POST" action="/upload.html" enctype="multipart/form-data">
        <input type="text" name="user" />
        <input type="file" name="fafafa" />
        <input type="submit" value="提交" />
    form>

    <div>
        {% for item in img_list %}
            <img style="height: 200px;width: 200px;" src="/{{ item.path }}" />
        {% endfor %}
    div>


body>
html>

 

5.2 原生的ajax Http请求上传文件方法

涉及到两个对象FormData和XMLHttpRequest

利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

XMLHttpRequest 是一个 JavaScript 对象,它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议.

语法var myRequest = new XMLHttpRequest();

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .container img{
            width:200px;
            height:200px;
        }
    style>
head>
<body>
    <div class="container">
        {% for img in img_list %}
            <img src="/{{ img.path }}">
        {% endfor %}
    div>
    <input type="file" id="imgs" />
    <input type="button" value="提交" onclick="UploadXML()" />
    <script>
        function UploadXML() {
            var dic = new FormData();
            dic.append('user', 'v1');//append() 给当前FormData对象添加一个键/值对,name字段名称.value字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
            dic.append('fafafa', document.getElementById('imgs').files[0]);
            console.log(dic);
            var xml = new XMLHttpRequest();
            xml.open('post', '/upload.html', true);
            xml.onreadystatechange = function () {
                if(xml.readyState == 4){
                    var obj = JSON.parse(xml.responseText);
                    if(obj.status){
                        var img = document.createElement('img');
                        img.src = "/" + obj.path;
                        document.getElementById("imgs").appendChild(img);
                    }
                }
            };
            xml.send(dic);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
        }
    script>
body>
html>

5.4 jQuery Ajax上传,同时使用了iframe,一下代码包含了两种方法。即:

1-利用JQuery Ajax + FormData进行文件上传
2-基于Iframe实现伪Ajax 上传文件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .container img{
            width: 200px;
            height: 200px;
        }
    style>
    <script>
        function li(arg) {
            console.log(arg);
        }
    script>
head>
<body>
    <h1>测试Iframe功能h1>
    <input type="text" id="url" />
    <input type="button" value="点我" onclick="iframeChange();" />
    <iframe  id="ifr" src="">iframe>
    <hr/>
    <h1>基于iframe实现form提交h1>
    <form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
        <iframe style="display: none"  id="iframe_1" name="iframe_1" src="" onload="loadIframe();">iframe>
        <input type="text" name="user" />
        <input type="file" name="fafafa" />
        <input type="submit" />
    form>
    <h1>图片列表h1>
    <div class="container" id="imgs">
        {% for img in img_list %}
            <img src="/{{ img.path }}">
        {% endfor %}
    div>    

    <input type="file" id="img" />
    <input type="button" value="提交XML" onclick="UploadXML()" />
    <input type="button" value="提交JQ" onclick="Uploadjq()" />
    <script src="/static/jquery-2.1.4.min.js">script>
    <script>
        function UploadXML() {
            var dic = new FormData();
            dic.append('user', 'v1');
            dic.append('fafafa', document.getElementById('img').files[0]);
            var xml = new XMLHttpRequest();
            xml.open('post', '/upload.html', true);
            xml.onreadystatechange = function () {
                if(xml.readyState == 4){
                    var obj = JSON.parse(xml.responseText);
                    if(obj.status){
                        var img = document.createElement('img');
                        img.src = "/" + obj.path;
                        document.getElementById("imgs").appendChild(img);
                    }
                }
            };
            xml.send(dic);
        }
        function Uploadjq() {
            var dic = new FormData();
            dic.append('user', 'v1');
            dic.append('fafafa', document.getElementById('img').files[0]);
            $.ajax({
                url: '/upload.html',
                type: 'POST',
                data: dic,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                dataType: 'JSON',
                success: function (arg) {
                    if (arg.status){
                        var img = document.createElement('img');
                        img.src = "/" + arg.path;
                        $('#imgs').append(img);
                    }
                }
            })
        }
        function  iframeChange() {
            var url = $('#url').val();
            $('#ifr').attr('src', url);
        }
        function loadIframe() {
            console.log(1);
            // 获取iframe内部的内容
            var str_json = $('#iframe_1').contents().find('body').text();
            var obj = JSON.parse(str_json);
            if (obj.status){
                var img = document.createElement('img');
                img.src = "/" + obj.path;
                $('#imgs').append(img);
            }
        }
    script>
body>
html>

 

  

 

转载于:https://www.cnblogs.com/gregoryli/p/7683732.html

你可能感兴趣的:(Python Web框架篇:Django文件上传)