多张图片上传预览

html：

<html>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function(){
        $('.pics').change(function(){
            $(this).parent().submit();
        });
    })
</script>
<body>

    <div>
        <form action="<?=$C->SITE_URL?>ylpic" method="post" target="hiddenFrameName" enctype="multipart/form-data">
            <label>图片1：</label> <input class="pics" type="file" name="pic" /><img id="img1" src="" width="80" height="80" style="display: none;" />
            <input type="hidden" name="tip" value="1">
        </form>
        <form action="<?=$C->SITE_URL?>ylpic" method="post" target="hiddenFrameName" enctype="multipart/form-data">
            <label>图片2：</label> <input class="pics" type="file" name="pic" /><img id="img2" src="" width="80" height="80" style="display: none;" />
            <input type="hidden" name="tip" value="2">
        </form>
        <form action="<?=$C->SITE_URL?>ylpic" method="post" target="hiddenFrameName" enctype="multipart/form-data">
            <label>图片3：</label> <input class="pics" type="file" name="pic" /><img id="img3" src="" width="80" height="80" style="display: none;" />
            <input type="hidden" name="tip" value="3">
        </form>
    </div>
<form action="<?=$C->SITE_URL?>add" method="post" target="hiddenFrameName" id="frm">
    <input type="hidden" name="pic1" value="" id="pic1">
    <input type="hidden" name="pic2" value="" id="pic2">
    <input type="hidden" name="pic3" value="" id="pic3">
</form>
<iframe style="display: none" name='hiddenFrameName' id="hidden_frame"></iframe>

</body>
</html>

ylpic.php

<?php
$tip=$_POST['tip'];
if(isset($_FILES['pic']) && !empty($_FILES['pic']['tmp_name'])){
    $thumbname = number_format(time() + rand(1, 999));
    $upyun = new upyun($C->youpai_name, $C->youpai_id, $C->youpai_pw);
    $tmp=$_FILES['pic']['tmp_name'];
    $fn = '/'.$thumbname.'.jpg';
    $fh = fopen($tmp, 'r');
    $ret = $upyun->writeFile($fn, $fh, true);
    if ($ret) {
        $url=$C->up_url.$fn;
    }
}
?>
<body onLoad="doneLoading(parent)">
</body>

<script type="text/javascript">
    var tip='<?php echo $tip;?>';
    //在页面上显示刚刚上传成功的图像
    function doneLoading(theFrame) {
        var obj=theFrame.document.getElementById('img'+tip);
        var obj1=theFrame.document.getElementById('pic'+tip);
        obj.src='<?php echo $url;?>';
        obj.style.display='block';
        obj1.value='<?php echo $url;?>';
    }
</script>

注：iframe要通过parent才能找到它外面的DOM节点。

add.php使用来将数据入库的。

posted @ 2013-05-24 17:35  不负韶华668  阅读(339)  评论(0)  编辑  收藏  举报