吴先生不爱吃辣

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
django之上传

一 通过form表单上传

import os
def upload(request):
    if request.method == 'GET':
        #将图片显示到html页面
        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')
        #上传的路径
        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)

        return redirect('/upload.html')
views代码
Html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>
View Code

 二 通过ajax上传

  a. 悄悄的上传
        1、xmlHttpRequest
            xml = new XMLHttpRequest();
            xml.open('post', '/upload.html', true)
            xml.send("k1=v1; k2=v2;")
        2、jQuery 
            $.ajax({
                url:
                data: {'k1': 'v1', 'k2': 'v2'}
            })
            
        FormData对象
            dict = new FormData()
            dict.append('k1','v1');
            dict.append('k2','v2');
            dict.append('fafafa', 文件对象);
            
            $.ajax({
                url:
                data: dict,
            })

1、xmlHttpRequest上传

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')

        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))
views
class Img(models.Model):
    path = models.CharField(max_length=120)
models
<input type="file" id="img" />
 <input type="button" value="提交JQ" onclick="Uploadjq()" />
<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);
        }
</script>
XMLHttpReques上传

 

2 Ajax上传

<input type="file" id="img" />
<input type="button" value="提交JQ" onclick="Uploadjq()" />
<script src="/static/jquery-2.1.4.min.js"></script>
<script>

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);
                    }
                }
            })

        }
</script>
HTML

 

posted on 2020-05-04 22:43  吴先生不爱吃辣  阅读(119)  评论(0)  编辑  收藏  举报