Question

我有一个包含多个字段和一个图像的表单。问题是我希望在上传照片时显示图像。我设法通过将图像放在另一个上传图像时自动提交的表单中来实现。效果很好。

我的问题是，现在，我有两个单独的表单（因为你不能嵌套它们）。一个包含所有数据。一个与图像。我的html看起来像（基本上）：

<form>
 <input type="text"/>
 <input type="text"/>
 <input type="text"/>
</form>
<form> <!--Auto submitted-->
 <input type="file"/>
</form>

问题是第二种形式在第一种形式下面，理想情况下，我希望图像位于第一种形式的第一和第二输入之间。从CSS的角度来看，我的问题更多。

我通过在第一种形式中添加div并使用javascript在div前面重新定位第二种形式，使用绝对位置做了一些解决方法。它有效，但它“糟糕”

<form>
 <input type="text"/>
 <div id="dummyDiv" style="dimension of the second form found with javascript"></div> <!-- After page load, I use javascript to position the second form here -->
 <input type="text"/>
 <input type="text"/>
</form>
<form>
 <input type="file"/>
</form>

但现在我正在使用响应式设计，它变得一团糟。有没有办法说“这个表格必须始终定位在这个div上？”

在这里演示：Demo

Answer 1

继续上述评论：

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('blah').src = e.target.result;
        }

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

document.getElementById("imgInp").onchange = function(){
    readURL(this);
};

和html：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

http://jsfiddle.net/jonigiuro/jygT7/

这意味着您需要退回几步，但应该从根本上解决问题（注意即可能会导致一些问题，请在评论链接中提供解决方案）

Answer 2

您可以使用隐藏帧的旧时技巧来处理图像上传，然后每次用户选择图像时都不必重新加载整个页面。

只需在页面的任何位置注入此类HTML：

<iframe name="ImageUploadFrame" id="ImageUploadFrame" style="display: none;" onload="HandleImagePreview(this);"></iframe>

要让自动提交的表单使用框架，只需添加此类内容，仅此而已：

<form target="ImageUploadFrame" ...>

下一步，请勿使用<div>，而应使用最初隐藏的<image>：

<input type="text" />
<img id="imgPreview" style="display: none; " />
<input type="text" />

下一步是JavaScript，当框架加载提交的表单时会自动触发：

function HandleImagePreview(oFrame) {
    var arrImages = oFrame.contentWindow.document.images;
    if (arrImages.length === 1) {
        var oUploadedImage = arrImages[0];
        var oPreviewImage = document.getElementById("imgPreview");
        oPreviewImage.src = oUploadedImage.src;
        oPreviewImage.style.display = "";
    }
}

最后一步是调整处理提交图像的服务器端代码。要使上述工作按原样，让服务器端代码在有效图像上传的情况下生成此类HTML：

<html>
<body>
    <img src="name_of_image" />
</body>
</html>

JS将知道从框架中提取图像并将其显示在适当的位置。

您也可以通过这种方式处理错误，例如输出一些文本而不是图像和阅读文本，但是留给你。

全局表单内的图像自动提交表单

2 个答案: