首頁  >  問答  >  主體

html - 单页面实现多处多图片预览上传?

需求:一个页面中有多处图片上传,而各处图片上传在上传时要实现多图预览,利用异步传输。
我的处理方法:利用webuploader插件进行多图预览上传…
问题:单页中这个插件只能实例化一次,而多次实例化无效~~
试了一些其它插件也是一样,求一个解决思路,或者有符合这个场景的插件么?平时没怎么用插件,麻烦大家推荐一下,谢谢。

天蓬老师天蓬老师2764 天前835

全部回覆(2)我來回復

  • 巴扎黑

    巴扎黑2017-04-17 13:34:56

    要實現多圖預覽上傳,還是挺麻煩的,還沒看過這樣的外掛。
    如果不考慮瀏覽器相容性,多圖預覽上傳並沒有這麼麻煩,HTML5對此作了很多最佳化。如果要考慮IE8以下瀏覽器就麻煩了,通常都用FLASH外掛來上傳。真心不想用這樣的東西。
    總之一句話,推薦自己寫一個插件,真不行可以修改webuploader插件。靜下心來,真心不難的。
    可以參考我開源的一個多圖上傳元件,http://git.oschina.net/tmnet/jQuery_image_muti_upload就是少了圖片預覽功能,其它功能還是非常齊全的。

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 13:34:56

    可以考慮用form+iframe模擬AJAX異步上傳:
    form的target設為頁面內的一個iframe,讓這個iframe顯示action請求後的內容.
    能夠實現單頁多處多圖片預覽上傳,不需要任何外掛程式,支援IE8.

    <?php
    if(isset($_POST['submit']) && !empty($_FILES['file'])) {
        $i = 0;
        foreach( $_FILES['file']['name'] as $v ) {
            move_uploaded_file($_FILES['file']['tmp_name'][$i], 'uploads/'.$v);
            $i++;
        }
        header('Content-Type: text/html; charset=utf-8');
        echo '<style>* {padding: 0;margin: 0;}</style>';
        foreach( $_FILES['file']['name'] as $v ) {
            echo '<img src="uploads/'.$v.'" width="100%" height="200px"/><hr>';
        }
        exit();
    }
    if(isset($_POST['submit2']) && !empty($_FILES['file2'])) {
        $i = 0;
        foreach( $_FILES['file2']['name'] as $v ) {
            move_uploaded_file($_FILES['file2']['tmp_name'][$i], 'uploads/'.$v);
            $i++;
        }
        header('Content-Type: text/html; charset=utf-8');
        echo '<style>* {padding: 0;margin: 0;}</style>';
        foreach( $_FILES['file2']['name'] as $v ) {
            echo '<img src="uploads/'.$v.'" width="100%" height="200px"/><hr>';
        }
        exit();
    }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery "AJAX" upload</title>
    <style>
    * { margin: 0; padding: 0; }
    #con { width: 360px; margin: 10px; }
    input { display: block; margin: 10px; }
    </style>
    </head>
    <body>
    <p id="con">
        <h1>PHP upload</h1>
        <form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post" enctype="multipart/form-data" target="ul_frame">
            <input type="file"   name="file[]" class="file" />
            <input type="file"   name="file[]" class="file" />
            <input type="submit" name="submit" value="上传" class="submit" />
            <iframe name="ul_frame" class="ul_frame" src="" frameborder=0 scrolling="no"
             style="display:none;border:1px solid #AAAAAB;width:200px;height:400px;"></iframe>
        </form>
        
        <h1>PHP upload 2</h1>
        <form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post" enctype="multipart/form-data" target="ul_frame2">
            <input type="file"   name="file2[]" class="file2" />
            <input type="file"   name="file2[]" class="file2" />
            <input type="submit" name="submit2" value="上传" class="submit2" />
            <iframe name="ul_frame2" class="ul_frame2" src="" frameborder=0 scrolling="no"
             style="display:none;border:1px solid #AAAAAB;width:200px;height:400px;"></iframe>
        </form>
    </p>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
        $('input.submit').click(function(){
            $('iframe.ul_frame').show();
        });
        $('input.submit2').click(function(){
            $('iframe.ul_frame2').show();
        });
    });
    </script>
    </body>
    </html>

    回覆
    0
  • 取消回覆