84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
需求:一个页面中有多处图片上传,而各处图片上传在上传时要实现多图预览,利用异步传输。我的处理方法:利用webuploader插件进行多图预览上传…问题:单页中这个插件只能实例化一次,而多次实例化无效~~试了一些其它插件也是一样,求一个解决思路,或者有符合这个场景的插件么?平时没怎么用插件,麻烦大家推荐一下,谢谢。
欢迎选择我的课程,让我们一起见证您的进步~~
要实现多图预览上传,还是挺麻烦的,还没见过这样的插件。如果不考虑浏览器兼容性,多图预览上传并没有这么麻烦,HTML5对此作了很多优化。如果要考虑IE8及以下浏览器就麻烦了,一般都用FLASH插件来上传。真心不想用这样的东西。总之一句话,推荐自己写一个插件,真不行可以修改webuploader插件。静下心来,真心不难的。可以参考我开源的一个多图上传组件,http://git.oschina.net/tmnet/jQuery_image_muti_upload就是少了图片预览功能,其它功能还是非常齐全的。
可以考虑用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>
要实现多图预览上传,还是挺麻烦的,还没见过这样的插件。
如果不考虑浏览器兼容性,多图预览上传并没有这么麻烦,HTML5对此作了很多优化。如果要考虑IE8及以下浏览器就麻烦了,一般都用FLASH插件来上传。真心不想用这样的东西。
总之一句话,推荐自己写一个插件,真不行可以修改webuploader插件。静下心来,真心不难的。
可以参考我开源的一个多图上传组件,http://git.oschina.net/tmnet/jQuery_image_muti_upload就是少了图片预览功能,其它功能还是非常齐全的。
可以考虑用form+iframe模拟AJAX异步上传:
form的target设为页面内的一个iframe,让这个iframe显示action请求后的内容.
能够实现单页面多处多图片预览上传,不需要任何插件,支持IE8.