Загрузить изображение поверх фрейма - PullRequest
Новая
       18

Загрузить изображение поверх фрейма

0 голосов
/ 19 июля 2011

Я создаю веб-страницу, которая позволяет пользователям загружать изображение поверх фрейма (веб-страницы, которую выберет пользователь)

У меня обе функции работают по отдельности, но я не могу заставить их работать вместе.

Кто-нибудь делал что-то подобное раньше?

EDIT

Вот код, который я использую, чтобы позволить пользователю захватить веб-страницу; 

<script type="text/javascript">
    function get(eid) {
    var d = document;
    var r = d.getElementById(eid);
    return r;
    }

    function loadUrl(){
    var url = get('url').value;
    get('myiframe').src = url;
    }
</script>

<body>

    <div id="menu">

        <h1>
            Image Uploader
        </h1>

        <form>

            <ul>

                <li>
                    <label class="formLable" for="url">URL: </label> 
                    <input id="url" type="text" name="url" value="" /> 
                </li>

                <li>
                    <label class="formLable" for="image">Image: </label> 
                    <input id="image" type="file" name="image" value="Upload Image" /> 
                </li>

                <li>
                    <label class="formLable" for="top">Top (px): </label> 
                    <input id="top" type="text" name="top" value="" /> 

                <li>
                    <label class="formLable" for="left">Left (px): </label> 
                    <input id="left" type="text" name="left" value="" />  
                </li>

                <li>
                    <input type="button" value="GO!" onclick="loadUrl();" />
                </li>

            </ul>

        </form>

    </div>


    <iframe id="myiframe" frameborder="0"></iframe>

А вот что я использую для загрузки изображений 

<script type='text/javascript'>
    $(document).ready(function(){

        $('#image_upload_form').submit(function(){
            $('div#ajax_upload_demo img').attr('src','loading.gif');
        });

        $('iframe[name=upload_to]').load(function(){
            var result = $(this).contents().text();
            if(result !=''){
            $('div#ajax_upload_demo img').attr('src',$(this).contents().text());
            }
        });

    });
</script>

<body>

    <div id='ajax_upload_demo'>
        <div id="image"><img src='blank.gif' /></div>
    </div>

    <iframe name='upload_to'></iframe>

    <div id="menu">

        <h1>
            Image Uploader
        </h1>

        <form id='image upload_form' method='post' enctype='multipart/form-data' action='add_avatar.php' target='upload_to'>

            <ul>

                <li>
                    <label class="formLable" for="image">Image: </label> 
                    <input type='file' id='file_browse' name='image' /> 
                </li>

                <li>
                    <label class="formLable" for="top">Top (px): </label> 
                    <input id="top" type="text" name="top" value="" /> 

                <li>
                    <label class="formLable" for="left">Left (px): </label> 
                    <input id="left" type="text" name="left" value="" />  
                </li>

                <li>
                    <input type='submit' value='Submit'>
                </li>

            </ul>

        </form>

    </div>

    <iframe id="myiframe" frameborder="0"></iframe>
...