0

我目前正在使用 Django 构建一个 Web 应用程序，并且我已经实现了可能被称为“签名字段”的东西。本质上，它使用http://keith-wood.name/signature.html处的 jQuery UI 插件来实现签名捕获字段，当提交表单时，该字段通过 AJAX POST 作为 base 64 编码字符串发送到服务器，然后转换为服务器上的图像。

现在，我已经将它的客户端方面重构为一个称为 SignatureInput 的可重用小部件，并且我还在单独的视图中实现了它的服务器端方面。但是，我真的很想让它成为通用字段，以便我可以将它与现有的通用视图一起使用，这就是我正在努力的地方 - 这可能只是一个以木换树的时刻，但我可以'在 Django 文档中找不到任何涵盖此类情况的内容。

SignatureField 本身扩展了 ImageField，在管理界面中我想坚持现有的图像上传对话框，所以我不想在模型级别覆盖它。相反，当它仅在前端提交时，我希望它从 request.POST 中提取，处理并添加到 request.FILES。

我在 widgets.py 中为它定义了以下小部件：

class SignatureInput(ClearableFileInput):
def render(self, name, value, attrs=None):
    try:
        id = self.attrs['id']
    except KeyError:
        id = None
    if id: 
        id_html = ' id="%s"' % (id)
    else:
        id_html = ''

    # Value is set - show existing image and field to change it
    if value:
        html = """ 
    <div class="signatureContainer">
    <br /><img class="existingSignature" alt="Signature" title="Signature" src="/media/%s"></img>
    <div data-role="collapsible">
        <h4>New signature</h4>
        <br /><div class="signature"%s></div><br /><br />
        <a data-role="button" class="signatureClear">Clear signature</a>
    </div>

        """ % (value, id_html)
    else:
        html = """
    <div class="signatureContainer">
    <br /><div class="signature"%s></div><br /><br />
    <a data-role="button" class="signatureClear">Clear signature</a>
    </div>
        """ % (id_html)
    return html

SignatureInput 字段用于所有需要签名字段的前端表单，并使用 jQuery AJAX 作为 base 64 编码字符串提交。

以下是我如何实现用于处理现有视图中图像的服务器端代码：

# Create your views here.
import cStringIO as StringIO
from xhtml2pdf import pisa
from django.http import HttpResponse, HttpResponseRedirect
from django.template.loader import get_template
from django.template.context import Context
from django.shortcuts import render, render_to_response
from my_app.models import *
from my_app.forms import JobForm
from django.core.files.uploadedfile import InMemoryUploadedFile
from django.conf import settings
import base64
import uuid
import sys 


def decodeImage(image):
    # Remove encoding data
    image = image.replace('data:image/png;base64,', '') 

    # Decode image
    image = base64.b64decode(image)

    # Return it
    return image


def addJob(request):
    # If request is a GET request, just render it
    if request.method == 'GET':
        return render_to_response('my_app/job_form.html', {'form': JobForm})
    elif request.method == 'POST':
        # If request is a POST request, process it
        # Get the signatures
        if request.POST.get(u'signature'):
            signature = StringIO.StringIO(decodeImage(request.POST[u'signature']))

            # Construct the File objects
            signatureOutput = InMemoryUploadedFile(signature,
                    field_name='signature',
                    name=settings.MEDIA_ROOT + str(int(uuid.uuid1()))[:10] + '.png',
                    content_type="image/png",
                    size=sys.getsizeof(signature),
                    charset=None)
            request.FILES[u'signature'] = signatureOutput

        # Validate the data
        jobform = JobForm(request.POST, request.FILES)

        if jobform.is_valid():
            # Save the form as a new instance of Job
            jobform.save()

            # Show the success page
            return HttpResponseRedirect('/forms/jobs/add/success/')
        else:
            # Return an error
            return render(request, 'my_app/job_form.html', {
                'form': jobform,
            })

我如何在提交过程的早期执行当前在 addJob 视图函数中完成的处理，以便我可以将签名字段与通用视图一起使用？基本上我需要能够将字符串处理成图像并将其从 request.POST 移动到 request.FILES 在它到达视图之前。中间件似乎是错误的地方。

4

1 回答 1

1

您可以尝试使用该value_from_datadict方法在自定义小部件中执行此操作。从这个函数的 Django 文档字符串：

给定一个数据字典和这个小部件的名称，返回这个小部件的值。如果未提供，则返回 None。

此方法应该根据 POST 数据字典和小部件的名称返回一个值。因此，在您的情况下，您可以从 POST 读取 base64 字符串并将其转换为图像文件数据。此数据需要对应于 ImageField 的预期。

这个问题使用了我提到的功能：
Django subclassing multiwidget - rebuilding date on post using custom multiwidget

还要在这里检查这个函数的 Django 代码：
https ://github.com/django/django/blob/master/django/forms/widgets.py

于 2013-06-21T09:27:34.273 回答