这是您的HTML表单
<form method="post" action="uploadImages.php" name ='photo' id='imageuploadform' enctype="multipart/form-data"> <input hidden="true" id="fileupload" type="file" name="image[]" multiple > <div id ="divleft"> <button id="btnupload"></button> </div> </form>
这是您的JQuery和Ajax。默认情况下，fileInput是隐藏的。
点击了上传按钮
$("#btnupload").click(function(e) { $("#fileupload").click(); e.preventDefault();});$('#fileupload').change(function (e) { $("#imageuploadform").submit(); e.preventDefault();});$('#imageuploadform').submit(function(e) { var formData = new FormData(this); $.ajax({ type:'POST', url: 'ajax/uploadImages', data:formData, xhr: function() { var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',progress, false); } return myXhr; }, cache:false, contentType: false, processdata: false, success:function(data){ console.log(data); alert('data returned successfully'); }, error: function(data){ console.log(data); } }); e.preventDefault();});function progress(e){ if(e.lengthComputable){ var max = e.total; var current = e.loaded; var Percentage = (current * 100)/max; console.log(Percentage); if(Percentage >= 100) {// process completed } } }您的php代码如下所示
<?phpheader('Content-Type: application/json'); $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions $max_size = 30000 * 1024; // max file size in bytes $json = array(); if ( $_SERVER['REQUEST_METHOD'] === 'POST' ) { for($i=0;$i<count($_FILES['image']['tmp_name']);$i++) { $path="image/uploads/photos/"; if(is_uploaded_file($_FILES['image']['tmp_name'][$i]) ) {// get uploaded file extension$ext = strtolower(pathinfo($_FILES['image']['name'][$i], PATHINFO_EXTENSION));// looking for format and size validity if (in_array($ext, $valid_exts) AND $_FILES['image']['size'][$i] < $max_size) { // unique file path $uid = uniqid(); $date = date('Y-m-d-H-i-s'); $path = $path ."image_" .$date. '_' . $uid . "." .$ext; $returnJson[]= array("filepath"=>$path); $filename = "image_" . $date . "_" .$uid . "." . $ext; $this->createthumb($i,$filename); // move uploaded file from temp to uploads directory if (move_uploaded_file($_FILES['image']['tmp_name'][$i], $path)) { //$status = 'Image successfully uploaded!'; //perform sql updates here } else { $status = 'Upload Fail: Unknown error occurred!'; } } else { $status = 'Upload Fail: Unsupported file format or It is too large to upload!'; } } else {$status = 'Upload Fail: File not uploaded!'; } } } else { $status = 'Bad request!'; } echo json_enpre($json);?>
