在iframe上上传图片

时间:2011-07-19 08:42:50

标签: jquery iframe file-upload uploading

我正在构建一个网页,允许用户在iframe(用户将选择的网页)上方上传图片。

我有两个功能分开工作,但我不能让它们一起工作。

以前有人做过这样的事吗?

修改

以下是我用来允许用户捕获网页的代码;

<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>

0 个答案:

没有答案