Question

父页面包含表单，其中包含一个触发Shadowbox子项的按钮。

Shadowbox子项包含一个表单，在提交后，填充隐藏的父表单数据。非图像数据很容易。

如何处理图像？换句话说，如何在提交父表单后将要从Shadowbox上传的图像传播到父级然后上传？

选择的标签是因为我正在使用这些语言。

Answer 1

我发现解决此问题的最简单方法是使用this answer，这需要进行一些认真的挖掘。

基本上，在输入文件字段上使用onchange事件，将用户浏览的图像的base64编码版本保存在父页面的变量中。

Shadowbox页面：

// In your JS
$('[type=file]').change(function ()
{
    if (input.files && input.files[0])
    {
        var reader = new FileReader();

        reader.onload = function (e)
        {
            // This is where the parent var gets the encoded image.
            self.parent.hiddenElement.val(e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

父页面：

// HTML
<input type='hidden' name='encoded_image' />

// In your JS
var hiddenElement = $('[name=encoded_image]');

现在可以在提交父页面表单后将此base64编码图像保存到服务器上的blob存储中。

在父提交后，在Shadowbox的上传字段中获取图片以上传？

1 个答案: