码迷,mamicode.com
首页 > Web开发 > 详细

利用iframe和form上传和预览图片

时间:2018-06-20 12:53:07      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:console   padding   meta   OLE   uid   func   inline   win   ret   

URL文件

from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path(admin/, admin.site.urls),

    path(upload.html/, views.upload),
    path(upload_img.html/, views.upload_img),
]

 

 

views文件

from django.shortcuts import render,HttpResponse
import json
# Create your views here.



def upload(request):

    return render(request,upload.html)

def upload_img(request):
    import os
    import uuid

    nid = str(uuid.uuid4())
    ret = {status:True,data:None,message:None}

    obj = request.FILES.get(k3)
    file_path = os.path.join(static, nid+obj.name)
    f = open(file_path,wb)
    for line in obj.chunks():
        f.write(line)
    f.close()
    ret[data]=file_path

    return HttpResponse(json.dumps(ret))

 

 

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            color: orangered;
        }
    </style>
</head>
<body>





    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action=‘/upload_img.html/‘ method="POST" enctype="multipart/form-data" target="ifra1">

        <input type="file" name="k3" onchange="uploadFile()"/>

    </form>


     <h3>预览</h3>
    <div id="prevl">

    </div>


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

        function uploadFile(){
            document.getElementById(iframe1).onload = reloadIframe1;
            document.getElementById(fm1).submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            console.log(obj.data);
            var tag = document.createElement(img);
            tag.src=/+obj.data;
            $(#prevl).empty().append(tag)

        }

    </script>


</body>
</html>

 

利用iframe和form上传和预览图片

标签:console   padding   meta   OLE   uid   func   inline   win   ret   

原文地址:https://www.cnblogs.com/lhqlhq/p/9202874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!