1

我有一个包含多个字段和一个图像的表单。问题是我希望在上传照片时显示图像。我设法通过将图像放在另一个表单中来做到这一点，该表单在上传图像时自动提交。它运作良好。

我的问题是现在，我有两个单独的表单（因为你不能嵌套它们）。一个包含所有数据。和一个图像。我的 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 上”？

演示在这里：演示

4

2 回答 2

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/

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

于 2013-08-28T09:29:36.500 回答
0

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

只需在页面的任何位置注入这样的 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 会知道从框架中提取图像并将其显示在适当的位置。

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

于 2013-08-28T09:08:25.130 回答