django--js--前后端交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.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 action="/catinfo/" method="post" enctype="multipart/form-data" target="ifm1" >
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        {% csrf_token %}
        <input type="file"  id="btn_file"  name="pic1" />
        <br/>
        <input type="submit" onclick="iframeSubmit();" value="上传" >
    </form>


<div id="preview">
    <img id="uploadimg" src="/media/pic/2.jpg" height="200" width="200"  />
</div>
    <script>
        function iframeSubmit(){
            $('#ifm1').load(function(){
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);
                //$('#preview').html(' ');
                // var imgTag = document.createElement('img');
               // imgTag.src =  obj.data;     //访问的路径
             //   item="3660d117db8d3156a25f83da8c62f52a.jpg"
               // <img src="/static/pics/'+item+'">
                document.getElementById('uploadimg').src=(obj.data);
                document.getElementById('identifyimg').src=(obj.data);
                document.getElementById('imgurl').value=(obj.data);
            })
        }

    </script>

  <div>

<form action="/detectImage/" method="post" enctype="multipart/form-data" target="result" >
      <iframe id="result" name="result" style="display: none;"></iframe>
    {% csrf_token %}
    <input type="text" id="imgurl" name="imgurl" style="display: none;"/>
    <input type="submit" onclick="resultShow();" value="识别" />
</form>
    <img  id="identifyimg" src="/media/pic/2.jpg" name="pictodetect"   height="200" width="200"  />
       <p  > 结果展示:</p>
       <p id="identitiyresult" > 结果内容</p>
   </div>

<script>
        function resultShow(){
            $('#result').load(function(){
                var text = $('#result').contents().find('body').text();
                var obj = JSON.parse(text);
               //访问的路径
             //   item="3660d117db8d3156a25f83da8c62f52a.jpg"
               // <img src="/static/pics/'+item+'">
               // alert("123")
               // alert("text"+document.getElementById('identitiyresult').innerText)
                alert("识别图片地址是"+obj.resultImg)
                 document.getElementById('identifyimg').src=(obj.resultImg);
                 document.getElementById('identitiyresult').innerHTML=(obj.resultText);
            })
        }
</script>

</body>
</html>
django--js--前后端交互

猜你喜欢
