php ajax bootstrap多文件上传图片预览,ajax上传文件

<form enctype="multipart/form-data" id="upForm">
    <label class="btn btn-info" for="picture" title="Upload image file" id="uploadImgBtn" class="image_up">
        <input type="file" name="file" multiple class="sr-only" id="picture" accept=".jpg,.jpeg,.png">    
        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">选择本地图片</span>
    </label>
    <div id="previewImg" class="col-md-5">

</div>
</form>

$('#picture').on('change', function(){
#图片预览并上传
var imgFiles = $(this)[0].files
for (i=0;i<imgFiles.length;i++){

filePath = imgFiles[i].name
fileFormat = filePath.split('.')[1].toLowerCase()
src = window.URL.createObjectURL(imgFiles[i])
if(!fileFormat.match(/png|jpg|jpeg/) ) {
alert('上传错误,文件格式必须为:png/jpg/jpeg')
return
}
var preview = document.getElementById("previewImg")
var img = document.createElement('img')
img.width = 600

img.src = src
preview.appendChild(img)


}
//多文件
var formData = new FormData();
for(var i=0; i<$('#picture')[0].files.length;i++){
formData.append('file[]', $('#picture')[0].files[i]);
}
//单文件

// var formData = new FormData($('#upForm')[0]);
    //formData.append('file',$(':file')[0].files[0]);
    console.log(formData)
$.ajax({
url:'/orc/recognition/upload',
type: 'POST',
data: formData,
//这两个设置项必填
contentType: false,
processData: false,
success:function(data){
var srcPath = eval("(" + data + ")");
//注意这里的路径要根据自己的储存文件的路径设置
if(srcPath.msg != 'true'){
//alert('未识别的文件');
}else{
//$('#image_orc').attr('src', '/' + srcPath.src);
}
location.reload();

}
})

})
PHP:
public function upload(){
    $upFile = $_FILES['file'];
var_dump($upFile);
}

原文地址:https://www.cnblogs.com/chaihy/p/10336790.html