Django之利用ajax實現圖片預覽

本文轉載自查看原文 2018-06-05 11:07 1147 Html/ Css/ jQuery這三者之間不可告人的秘密

利用ajax實現圖片預覽的步驟為：

程序實現的方法為：

方法一：

upload.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/static/js/jquery-1.12.4.js"></script>
    <style>
        .upload{
            display: inline-block;padding: 10px;
            background-color: brown;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 90;
        }
        .file{
            width: 100px;height: 50px;opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 100;
        }
    </style>
</head>
<body>
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" onchange="changeUpalod();" />
        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
    </form>

    <div id="preview"></div>
    <script>
        function iframeSubmit(){
            $('#ifm1').load(function(){
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);

                $('#preview').empty();
                var imgTag = document.createElement('img');
                imgTag.src = "/" + obj.data;     //訪問的路徑
                $('#preview').append(imgTag);

            })
        }

    </script>

Views.py
def upload(request):
    return render(request,'upload.html')

def upload_file(request):
    username = request.POST.get('username')
    fafafa = request.FILES.get('fafafa')

    import os
    img_path = os.path.join('static/image/',fafafa.name)    #存儲的路徑
    with open(img_path,'wb') as f:      #圖片上傳
        for item in fafafa.chunks():
            f.write(item)

    ret = {'code': True , 'data': img_path}  #'data': img_path 數據為圖片的路徑，
    import json
    return HttpResponse(json.dumps(ret))    #將數據的路徑發送到前端

前端的效果為：

之后，可以看到

看此時的后台數據

可以看到此時的這張圖片已經被保存在一個名為image的文件夾中

方法二（直接將圖片進行預覽，無需提交）：

upload.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/static/js/jquery-1.12.4.js"></script>
    <style>
        .upload{
            display: inline-block;padding: 10px;
            background-color: brown;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 90;
        }
        .file{
            width: 100px;height: 50px;opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 100;
        }
    </style>
</head>
<body>
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" onchange="changeUpalod();" />
 value="Form提交"/>#}
    </form>

    <div id="preview"></div>
    <script>
function changeUpalod(){
            $('#ifm1').load(function(){
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);

                $('#preview').empty();        //原來有就先清空一下
                var imgTag = document.createElement('img');
                imgTag.src = "/" + obj.data;   //制作路徑
                $('#preview').append(imgTag);  //添加路徑
            });
            $('#form1').submit();
        }
    </script>
</body>
</html>

Views.py
def upload(request):
    return render(request,'upload.html')

def upload_file(request):
    username = request.POST.get('username')
    fafafa = request.FILES.get('fafafa')

    import os
    img_path = os.path.join('static/image/',fafafa.name)    #存儲的路徑
    with open(img_path,'wb') as f:      #圖片上傳
        for item in fafafa.chunks():
            f.write(item)

    ret = {'code': True , 'data': img_path}  #'data': img_path 數據為圖片的路徑，
    import json
    return HttpResponse(json.dumps(ret))    #將數據的路徑發送到前端

前端的效果為：

選擇文件后的效果為：

后台的效果為：

圖片被成功存儲在image文件中

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【django】ajax，上傳文件，圖片預覽 jQuery+Ajax實現圖片的預覽和上傳 Ajax 實現上傳圖片即時預覽功能 jQuery+Ajax實現圖片的預覽和上傳 Ajax 上傳圖片並預覽使用ajax，結合jquery,php實現圖片上傳預覽功能基於HTML5和JSP實現的圖片Ajax上傳和預覽 Python之利用socketserver實現並發利用FileReader實現上傳圖片前本地預覽用Ajax圖片上傳、預覽、修改圖片