前端上传图片的三种方法

Posted 11wayne

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端上传图片的三种方法相关的知识,希望对你有一定的参考价值。

前端上传图片的三种方法

 Django框架下,在前端上传文件,保存在数据库,并在前端不刷新页面显示上传图片。

  • 利用XMLHttpRequest 对象和FormData对象上传文件
  • Ajax上传文件
  • 基于form表单和iframe自己实现ajax请求

1、首先创建数据库表

class Img(models.Model):
    path = models.CharField(max_length=128)

 

 更新数据库

>python manage.py makemigrations

>python manage.py migrate

 

2、在Django后台views中定义函数

#前端上传文件,保存在数据库,并在前端不刷新页面显示上传图片
import os,json
@csrf_exempt
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))

 

3、添加urls路径

url(r^upload.html$, views.upload),

 

4、前端文件上传的三种方法

第一种、XML的方式上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container img{
            width: 200px;
            height:200px;
        }
    </style>
</head>
<body>
<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>
        //XML的方式上传文件,并在页面不刷新显示图片
        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;
                        $(#imgs).append(img);
                    }
                }
            };
            xml.send(dic);
        }
    </script>
</body>
</html>

 

第二种、ajax方式上传文件,并异步显示

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

       //ajax方式上传文件,并异步显示
        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  默认情况下jquary会对数据做处理
                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);
                    }
                }
                })
        }

 

第三种、基于form表单和iframe自己实现ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container img{
            width: 200px;
            height:200px;
        }
    </style>
</head>
<body>
    <h1>测试iframe功能</h1>
    <input type="text" id="url"/>
    <input type="button" value="点我" onclick="iframChange()">
    <iframe id="ifr" src=""></iframe>
    <hr/>
    <h1>基于ifram实现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" value="确定"/>
    </form>
    <h1>图片列表</h1>
    <div class="container" id="imgs">
        {% for img in img_list %}
            <img src="/{{ img.path }}"/>
        {% endfor %}
    </div>

<script src="/static/jquery-2.1.4.min.js"></script>
    <script>


 //测试
        function iframChange(){
            var url = $(#url).val();
            $(#ifr).attr(src,url);

        }
        //基于form表单和iframe自己实现ajax请求
        function loadIframe(){
            console.log(2);
            // 获取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>

 


以上是关于前端上传图片的三种方法的主要内容,如果未能解决你的问题,请参考以下文章

图片压缩的三种方式

前端中实现文件上传下载的三种解决方案(推荐)

django中上传文件的三种方式

文件上传有两种方式upload

百度WebUploader中实现文件上传下载的三种解决方案(推荐)

vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(干货)