这样的HTML代码：
<form action="upload_multiple_post.php" method="post">
<input type='file' name="images[]" id="upload-file" multiple />
<?php
for($i=0;$i<5; $i++) {
?>
<div class="img-container" id="box<?php echo $i ?>">
<button style="display: none;" type="button" class="btn btn-primary show-button">
<i class="glyphicon glyphicon-edit"></i>
</button>
</div>
<?php
}
?>
<input name="mySubmit" type="submit" value="submit" />
</form>
upload_multiple_post：
<?php
echo '<pre>';print_r($_POST);echo '</pre>';die();
?>
演示和完整代码如下：http://phpfiddle.org/main/code/7623-agw4
例如，我选择了2张图片，然后我又选择了2张图片。然后我点击提交按钮，图片成功发送了最后2张图片
应成功发送4张图片
我该如何解决这个问题？
答案 0 :(得分：1)
正如@hassan在之前的评论中所述 - 当你多次打开文件浏览对话框时，你不能指望一个简单的HTML文件元素来记住以前的选择。为了达到预期的效果，您需要使用javascript来存储对所有选定文件的引用。
下面的代码应该会给你很多有用的想法 - 你几乎可以运行这个＆＃34;就像＃34;只对本地文件系统路径进行少量编辑。
该示例还显示了一种基本的使用方式＆＃34;拖动＆amp;降＆＃34;上传文件以及显示所选文件的预览。希望你能利用这些代码。
注意：在此处使用方法时使用enctype='multipart/form-data'（即尝试捕获php://input）将导致其失败。由于表单没有以标准方式提交，因此不需要包含 - 也不需要包含ajax函数指定的表单操作。
<?php
/* you could handle the file upload here rather than a separate script */
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$filename = isset( $_SERVER['HTTP_X_FILENAME'] ) ? $_SERVER['HTTP_X_FILENAME'] : false;
if( $filename ){
$dir = 'c:/temp/fileuploads/';
$path = $dir . $filename;
/* create a new file with the contents sent via xhr */
$bytes = file_put_contents( $path, file_get_contents( 'php://input' ) );
/* send feedback to client if required */
echo json_encode( array( 'filename'=>$filename, 'path'=>$path, 'bytes'=>$bytes ) );
}
exit();
}
?>
<!doctype html>
<html>
<head>
<title>Example File upload - multiple selections</title>
<style type='text/css'>
html *{font-family:calibri,verdana,arial;font-size:1rem;box-sizing:border-box;}
form{width:75%;float:none;margin:1rem auto;border:1px solid black;padding:1rem;}
#dropzone{padding:1rem;margin:1rem auto;float:none;width:60%;height:250px;border:3px solid green;text-align:center;line-height:200px;}
#previews{margin:2rem auto;float:none;width:90%;}
#previews img{margin:0.1rem;}
#list{margin:2rem auto;float:none;width:90%;}
input[type='file']{width:90%;}
input[type='button']{background:steelblue;color:white;}
</style>
<script type='text/javascript'>
var size=150;
var oImages=[];
var uploadtarget = '';
/* Simple ajax file upload function */
function uploadhandler( url,obj ){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 && xhr.status == 200 ) {
var json=JSON.parse( this.response );
var li=document.createElement('li');
li.innerHTML=' -> uploaded: '+json.filename;
document.getElementById('list').appendChild( li );
}
};
xhr.open('POST',url,true);
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.setRequestHeader('x_filename',obj.name);
xhr.send( obj.file );
}
function getaspect(w,h){
if( w==h )return 1;
else if( w > h ) return 2;
else if( h > w ) return 3;
else return 4;
}
function getratio(w,h){
return parseFloat(w) / parseFloat(h);
}
function bindEvents(){
var oFiles=document.getElementById('usrfile');
var oBttn=document.getElementById('upload');
var oPreview=document.getElementById('previews');
var oList=document.getElementById('list');
var oDrop=document.getElementById('dropzone');
oFiles.addEventListener('change', function(e){
var files=this.files;
for( var i=0; i < files.length; i++ ){
/* Get a reference to the file */
var file=files.item( i );
/* store properties of selected file(s) though only 2 are required */
var obj={
'file':file,
'name':file.name,
'size':file.size,
'lastModified':file.lastModified,
'lastModifiedDate':file.lastModifiedDate,
'type':file.type
};
oImages.push( obj );
/* add new list item to show selected file(s) */
var li=document.createElement('li');
li.innerHTML=file.name;
oList.appendChild( li );
}
}.bind( oFiles ),false);
oBttn.addEventListener('click',function(e){
oImages.forEach(function( obj ){
try{
var mime = /^image\//;
if ( !mime.test( obj.type ) ) {
return false;
}
/* Show a preview */
var img = document.createElement('img');
img.file=obj.file;
img.onload=function(event){
var ratio=getratio( this.width,this.height );
switch( getaspect( this.width, this.height ) ){
case 1:
this.width=size;
this.height=size;
break;
case 2:
this.width=size;
this.height=size / ratio;
break;
case 3:
this.height=size;
this.width=size * ratio;
break;
case 4:
break;
}
window.URL.revokeObjectURL( this.src );
};
/* add new thumbnail to the DOM */
oPreview.appendChild( img );
/* */
var reader = new FileReader();
reader.onload = (function(a) { return function(e) { a.src = e.target.result; }; })( img );
reader.readAsDataURL( obj.file );
/* upload the file */
uploadhandler.call( this, uploadtarget, obj );
}catch( err ){
}
});
oImages=[];
},false );
var dragenter=function(e){
e.stopPropagation();
e.preventDefault();
console.log(e.type);
};
var dragdrop=function(e){
e.stopPropagation();
e.preventDefault();
var filelist=e.dataTransfer.files
for( var i=0; i < filelist.length; i++ ){
/* Get a reference to the file */
var file=filelist.item( i );
/* store properties of selected file(s) though only 2 are required */
var obj={
'file':file,
'name':file.name,
'size':file.size,
'lastModified':file.lastModified,
'lastModifiedDate':file.lastModifiedDate,
'type':file.type
};
oImages.push( obj );
var li=document.createElement('li');
li.innerHTML=file.name;
oList.appendChild( li );
}
};
/* drag & drop event listeners */
oDrop.addEventListener('dragover',dragenter,false);
oDrop.addEventListener('dragenter',dragenter,false);
oDrop.addEventListener('drop',dragdrop,false);
}
document.addEventListener('DOMContentLoaded',bindEvents,false);
</script>
</head>
<body>
<form method='post'>
<input type='file' name='images[]' id='usrfile' multiple />
<input name='bttn' id='upload' type='button' value='Upload' />
<div id='dropzone'>Drag & Drop files here</div>
<ul id='list'></ul>
<div id='previews'></div>
</form>
</body>
</html>