html - 单页面实现多处多图片预览上传？
需求:一个页面中有多处图片上传，而各处图片上传在上传时要实现多图预览，利用异步传输。
我的处理方法:利用webuploader插件进行多图预览上传…
问题:单页中这个插件只能实例化一次，而多次实例化无效～～
试了一些其它插件也是一样，求一个解决思路，或者有符合这个场景的插件么？平时没怎么用插件，麻烦大家推荐一下，谢谢。
需求:一个页面中有多处图片上传，而各处图片上传在上传时要实现多图预览，利用异步传输。
我的处理方法:利用webuploader插件进行多图预览上传…
问题:单页中这个插件只能实例化一次，而多次实例化无效～～
试了一些其它插件也是一样，求一个解决思路，或者有符合这个场景的插件么？平时没怎么用插件，麻烦大家推荐一下，谢谢。
巴扎黑2017-04-17 13:34:56
It is quite troublesome to upload multiple image previews. I have never seen such a plug-in.
If browser compatibility is not considered, uploading multiple image previews is not that troublesome. HTML5 has made a lot of optimizations for this. If you want to consider IE8 and below browsers, it will be troublesome. Generally, FLASH plug-in is used to upload. I really don't want to use something like this.
In a word, it is recommended to write a plug-in yourself. If it doesn't work, you can modify the webuploader plug-in. It’s really not difficult to calm down.
You can refer to my open source multi-image upload component, http://git.oschina.net/tmnet/jQuery_image_muti_upload, which lacks the image preview function, but the other functions are still very complete.
高洛峰2017-04-17 13:34:56
You can consider using form+iframe to simulate AJAX asynchronous upload:
Set the target of the form to an iframe in the page, so that this iframe can display the content after the action request.
Able to achieve multiple image previews on a single page Uploading does not require any plug-ins and supports 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>