1

複数のフィールドと 1 つの画像を含むフォームがあります。事は、写真をアップロードするときに画像を表示したいということです。画像がアップロードされたときに自動送信される別のフォーム内に画像を配置することで、なんとかそれを行うことができます。それはうまくいきます。

私の問題は、現在、2 つの別個のフォームがあることです (それらをネストできないため)。すべてのデータを含む 1 つ。そしてイメージのある一枚。私のhtmlは（基本的に）次のようになります：

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

問題は、2 番目のフォームが最初のフォームの下にあることです。理想的には、最初のフォームの最初の入力と 2 番目の入力の間に画像を配置したいと考えています。私の問題は、CSS の観点からのものです。

最初のフォームに div を追加し、javascript を使用して絶対位置を使用して 2 番目のフォームを 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/

これは、数ステップ戻る必要があることを意味しますが、問題を根本から解決する必要があります (つまり、コメントのリンクで提供されている解決策に注意してください)。

于 2013-08-28T09:29:36.500 に答える