我有上传表格,允许用户上传多个文件。我决定,如果文件很大,则进度条会很好。下面是我的源代码。我是jQuery的新手,通常我只会使用php,但是我发现ajax更加用户友好。
<div id="new_upload"> <div class="close_btn"></div> <div id="uploads"></div> <form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file"> <fieldset><legend>Upload an image or video</legend> <input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required /> </fieldset> <div class="bar"> <div class="bar_fill" id="pb"> <div class="bar_fill_text" id="pt"></div> </div> </div> </form> </div> <script> function OnProgress(event, position, total, percentComplete){ //Progress bar console.log(total); $('#pb').width(percentComplete + '%') //update progressbar percent complete $('#pt').html(percentComplete + '%'); //update status text } function beforeSubmit(){ console.log('ajax start'); } function afterSuccess(data){ console.log(data); } $(document).ready(function(e) { $('#upload_file').submit(function(event){ event.preventDefault(); var filedata = document.getElementById("file"); formdata = new FormData(); var i = 0, len = filedata.files.length, file; for (i; i < len; i++) { file = filedata.files[i]; formdata.append("file[]", file); } formdata.append("json",true); $.ajax({ url: "global.func/file_upload.php", type: "POST", data: formdata, processData: false, contentType: false, dataType:"JSON", xhr: function() { var myXhr = $.ajaxSettings.xhr(); return myXhr; }, beforeSubmit: beforeSubmit, uploadProgress:OnProgress, success: afterSuccess, resetForm: true }); }); }); </script>
图像上传正常,数组发送到ajax,但进度条不动。实际上,调用这两个函数的console.log都不会产生这种情况。有没有正确的方法来调用我的ajax请求中的函数,以使此进度条正常工作。
beforeSubmit:beforeSubmit,uploadProgress:OnProgress,成功:afterSuccess,
请注意,此功能“成功:afterSuccess”在控制台显示我的数据时起作用。
这是您的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代码如下所示
<?php header('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_encode($json); ?>