0

我有一个正在构建的页面创建向导，我允许用户向页面添加最多 3 个图像。我目前使用的代码完成了工作，但它并没有像我想要的那样工作。在我的页面向导中，这是包含文件输入的 html：

<div class="pictures">
    <label>Add Pictures </label><span>(Maximum: 3)</span>
    <span id="input_container"></span>
    <a href="javascript:addPic()">add</a> |
    <a href="javascript:rmvPic()">remove</a>
</div>

我的javascript看起来像这样：

var picNum = 0;

function addPic() {
    if (picNum < 3) { picNum++;
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('name', 'picture_' + picNum);
        input.setAttribute('id', 'picture_' + picNum);

        var container = document.getElementById('input_container');
        container.appendChild(input);
    }
}

function rmvPic() {
    if (picNum > 0) {
        var container = document.getElementById('input_container');
        container.removeChild(document.getElementById('picture_' + picNum));
        picNum--;
    }
}

当前的设置允许用户动态地将他们想要的图像数量添加到他们的页面，但是在他们提交表单并返回编辑页面后，他们添加的所有元素现在都从页面中删除。我希望这样当用户回来并想要更改图像时，向导会记住他们添加的图片数量以及他们拥有的值。

我不知道我说的是否有道理，所以如果您需要更多信息，我愿意提供。如果你需要知道的话，我正在使用 ruby​​ on rails。

4

1 回答 1

0

当您说“返回编辑页面”时，我假设您的意思是页面加载发生了。如果是这种情况，那么您将丢失添加图像的提交页面的状态（javascript vars 将被重置）。如果您执行了提交，则服务器上应该存在您要查找的值。因此，在重新加载编辑页面时，您需要从服务器（ajax）请求值或在页面范围内呈现它们。

我不清楚您如何在页面之间导航或如何存储提交的值，所以我在这里提出了很多假设。

简而言之，HTML 是无状态的，因此您需要一种在页面之间存储值的方法。您可以存储在服务器上或本地存储（在 cookie 或本地缓存中）。

如果没有更清楚地了解您的应用程序的结构，我无法推荐一种方法。

于 2012-07-25T21:22:41.640 回答