如何将javascript函数返回值分配给python中的变量？

Question

html代码：

<h1>Uploading a photo.</h1>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <script type="text/javascript">
        var p;
        var canvas = document.createElement("canvas");
        var img1=document.createElement("img");

        function converttobyte()
        {
            p=document.getElementById("file").value;
            img1.setAttribute('src', p);
            canvas.width = img1.width;
            canvas.height = img1.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img1, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            alert("from getbase64 function"+dataURL );
            return dataURL;
        }
    </script>

    <form action="UploadFile" method="post" accept-charset="utf-8" name="UploadFileForm"
                                                   enctype="multipart/form-data">
        <input type="file" id="file" name=""><br>
        <input type="submit" value="Upload" onclick="converttobyte">
    </form>

Python 代码：

def UploadFile(request):
  if request.method == 'POST':
      converttobyte = request.GET['converttobyte'].decode("base64")
      #file = request.FILES['avatar']
      default_storage.save("%s"%(converttobyte), ContentFile(converttobyte.read()))
      return HttpResponse("File uploaded successfully")
  else:
      return HttpResponse("please upload a file")

应该在 if request.method== 'post' 之后添加什么语句，以便接受 python 脚本中的函数返回值。

请帮助我。提前致谢

Answer 1

解决问题的一种方法是：

1. 如下创建一个隐藏字段

   <input type="hidden" id="hide" name="URL" value="">
   

2. 在javascript函数中，不是返回值，而是为隐藏字段设置它

   document.getElementById("hide").value = dataURL;
   

3. 提交表单后，隐藏值随之而来。在 python 代码中使用 request.GET['URL'] 访问字段

希望这能解决问题。

Answer 2

您的代码存在一些问题。

您不应该调用onclick="converttobyte()" 之类的方法吗？

在converttobyte() 方法中，您只是在提交表单时返回dataURL，但该值如何传递给 POST 请求？

您需要通过 POST 请求传递值。您可以使用隐藏字段来实现此目的。试试这样的：

Javascript：

<h1>Uploading a photo.</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">
    var p;
    var canvas = document.createElement("canvas");
    var img1=document.createElement("img");

    function converttobyte()
    {
        p=document.getElementById("file").value;
        img1.setAttribute('src', p);
        canvas.width = img1.width;
        canvas.height = img1.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img1, 0, 0);
        var dataURL = canvas.toDataURL("image/png");
        alert("from getbase64 function"+dataURL );

        /**Set the value of the raw_bytes input field*/
        var form = document.getElementById('uploadForm');
        form.raw_bytes.value = dataURL;
    }
</script>

<form id="uploadForm" action="UploadFile" method="post" accept-charset="utf-8" name="UploadFileForm"
                                               enctype="multipart/form-data">
    <input type="file" id="file" name=""><br>
    <input type="hidden" name="raw_bytes" id="raw_bytes" />
    <input type="submit" value="Upload" onclick="converttobyte()">
</form>

Django 视图：

def UploadFile(request):
  if request.method == 'POST':
      raw_bytes = request.POST['raw_bytes'].decode("base64")

Answer 3

在您的表单内部创建一个隐藏变量，

<form action="UploadFile" method="post" accept-charset="utf-8" name="UploadFileForm"
                                                   enctype="multipart/form-data">

        <input type="hidden" id="url" name="url" value="">  
        <input type="file" id="file" name=""><br>
        <input type="submit" value="Upload" onclick="converttobyte">
</form>

不是从 java 脚本返回值，而是将该值分配给隐藏变量，

function convert_to_byte()
        {
            p=document.getElementById("file").value;
            img1.setAttribute('src', p);
            canvas.width = img1.width;
            canvas.height = img1.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img1, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            alert("from getbase64 function"+dataURL );
            document.getElementById("url").value = dataURL;
        }

然后提交后就可以使用下面的代码来获取python中的值了，

if request.method == 'POST':
    url_value = request.POST['url']