因此,我在 jquery-step 向导中将此文件上传了代码。
第一个向导步骤中有文件上传,但是它只是读取文件并在第二个向导步骤中返回数据
<form class="form" role="form" id="read-excel" method="POST" action="{{ url('job/readexcel') }}" enctype="multipart/form-data">
@csrf<div class="form-group">
<label for="input-file-now"> File Excel </label>
<input type="file" id="fileexcel" name="fileexcel" class="dropify" required data-allowed-file-extensions="xls xlsx" />
</div>
<button class="col-md-12 btn btn-dark" type="submit">Review & Summary</button>
</form>
所以在第二步,我希望第一步的文件上传到这里。
$('form#read-excel').submit(function (e) {
console.log('submited');
e.preventDefault();
let formData = new FormData(this);
$(`#the-body`).empty();
axios.post( READ_FILE_URL, formData, config)
.then( (response) => {
console.log(response);
$('body').loadingModal('destroy')
//for loop code
//do something..
//go to 2nd step
})
.catch( (error) => {
$('body').loadingModal('destroy')
alert('Error see log');
console.log(error);
});
$('form#upload-excel').submit( function (e) {
console.log(formData.get('fileexcel'));
e.preventDefault();
Swal({
title: 'are u sure?',
text: 'Some TnC.",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ok'
}).then((result) => {
if (result.value) {
axios.post(UPLOAD_URL, formData, config)
.then((response) => {
console.log(response);
$('body').loadingModal('destroy')
swal({
title: 'Good!',
html: 'upload success ',
type: 'success',
showCancelButton: false,
showConfirmButton: false
})
})
.catch((error) => {
$('body').loadingModal('destroy')
alert('error')
console.log(error);
});
}
})
e.stopImmediatePropagation(); // This Does the work for prevent upload double times
})
})
情况就是这样。
当我上传文件(例如: data1.xlsx ),然后转到第二个向导步骤并记录FormData console.log(formData.get('fileexcel'))
时。它返回 data1.xlsx 。但是当我回到第一步并使用其他文件(例如: data2.xlsx )重新上传并转到第二页并将其上传到服务器时。它返回 data1.xlsx 而不是 data2.xlsx 。