需求:一个页面中有多处图片上传，而各处图片上传在上传时要实现多图预览，利用异步传输。我的处理方法:利用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.