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

Teemwu
  • 219

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

回复
阅读 4.4k
2 个回答

可以考虑用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>
<div 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>
</div>
<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>

图片描述

米斯唐
  • 816

要实现多图预览上传,还是挺麻烦的,还没见过这样的插件。
如果不考虑浏览器兼容性,多图预览上传并没有这么麻烦,HTML5对此作了很多优化。如果要考虑IE8及以下浏览器就麻烦了,一般都用FLASH插件来上传。真心不想用这样的东西。
总之一句话,推荐自己写一个插件,真不行可以修改webuploader插件。静下心来,真心不难的。
可以参考我开源的一个多图上传组件,http://git.oschina.net/tmnet/jQuery_image_muti_upload就是少了图片预览功能,其它功能还是非常齐全的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏