0
这是我执行我无法发送附加表单数据与悬浮窗文件上传
var myDropzone = new Dropzone("#my-dropzone",
{
url: "/opd/addMedicalRecord",
autoProcessQueue: false,
parallelUploads: 20,
uploadMultiple: 20,
maxFiles: 20,
paramName: 'file',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
init: function()
{
var submitButton = document.querySelector("button#modal_addRecord")
myDropzone = this; // closure
submitButton.addEventListener("click", function()
{
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
alert("Called Process Queue");
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function()
{
// Show submit button here and/or inform user to click it.
// alert("Called Added File");
});
this.on('uploadprogress', function(file, progress, bytesSent, formData)
{
formData.append('reportType', $('input[name=modal_reportType]:checked', 'div#addNewReport').val());
formData.append('reportTitle', $("#modal_reportTitle").val());
formData.append('reportInvestigationDate', $("#modal_investigationDate").val());
formData.append('reportNote', $("#modal_notes").val());
// console.log('File is ' + file);
// console.log('Progress is ' + file.upload.progress);
// console.log('Size is ' + file.upload.bytesSent);
// $("#uploadProgress").css("width",Math.ceil(file.upload.progress) + "%");
});
this.on('complete',function(file)
{
// $("#full").modal('hide');
$("#uploadProgress").css("width","0%");
myDropzone.removeAllFiles();
});
}
});
悬浮窗码这是我的HTML代码：
<div class="modal fade" id="full" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div enctype="multipart/form-data" id="addNewReport" onSubmit="return false;">
<div class="modal-content">
<div class="modal-header green-modal">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Add new report for Abhishek Bharambe</h4>
</div>
<div class="modal-body">
{{-- <form onSubmit="return false;" enctype="multipart/form-data" id="addNewReport"> --}}
<div class="row mt-15"> {{-- Report Type--}}
<div class="col-md-8 col-md-offset-2">
<div class="form-group form-md-radios">
<label>Select Report Type</label>
<div class="md-radio-inline">
<div id="r_labreports_r_a" class="md-radio">
<input type="radio" id="modal_labReports" name="modal_reportType" value="lab" class="md-radiobtn">
<label for="modal_labReports"> <span class="inc"></span> <span class="check"></span> <span class="box"></span> Lab Reports </label>
</div>
<div id="r_imaging_r_a" class="md-radio">
<input type="radio" id="modal_labImaging" name="modal_reportType" value="image" class="md-radiobtn">
<label for="modal_labImaging"> <span class="inc"></span> <span class="check"></span> <span class="box"></span> Imaging </label>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-15"> {{-- Report Title--}}
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-hospital-o blue-icon-font"></i>
</span>
<input type="text" class="typeahead-newrecord form-control input-circle-right" id="modal_reportTitle" placeholder="Enter Report Title" name="reportTitle">
</div>
</div>
</div>
</div>
<div class="row mt-15">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<div class="input-group">
<span class="5pw input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-calendar blue-icon-font"></i>
</span>
<input name="date" class="pw100 input-circle-right form-control form-control-inline input-medium date-picker" form-input size="16" type="text" id="modal_investigationDate" data-date-format="dd-mm-yyyy" placeholder="Date of Investigation (Optional)" /> </div>
</div>
</div>
</div>
<div class="row mb-25">
<form class="dropzone dropzone-file-area" multiple name="file[]" id="my-dropzone" accept=accept="image/*, .pdf, .doc, .docx, .xls, .xlsx" style="width: 500px; margin-top: 50px;">
<h3 class="sbold">Drop Report related files here or click to upload</h3>
<p> You can upload images (.jpg, .jpeg, .png) or documents (.pdf, .docx, .doc, .xls, .xlsx) of the report. </p>
</form>
<br>
<br>
<br>
<div class="col-md-9 col-md-offset-1">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="uploadProgress">
<span class="sr-only"> 0% Uploaded </span>
</div>
</div>
</div>
<a class="btn hide" id="mbtn">Upload</a>
</div>
<div class="row">{{--Notes--}}
<div style="margin-top: 20px;"></div>
<div class="col-md-8 col-md-offset-2">
<div class="form-group form-md-line-input form-md-floating-label">
<textarea class="form-control" id="modal_notes" rows="2" cols="2" name="modal_notes"></textarea>
<label for="mpdal_notes">Notes</label>
<span class="help-block">Additional Notes Here</span>
</div>
</div>
</div>
{{-- </form> --}}
</div>
<div class="modal-footer">
<div class="row">
{{-- Submit Button --}}
<div class="col-md-8 col-xs-12 col-sm-12 col-md-offset-2">
<div class="col-md-6 col-sm-6 col-xs-6 nopad">
<button id="modal_addRecord" class="fwb btn btn-circle green-meadow">
<i class="fa fa-check"></i> Add Record
</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 nopad">
<button type="button" class="fwb btn btn-circle btn-outline dark" data-dismiss="modal"><i class="fa fa-close"></i> Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的Laravel后端侧我显示的数据看到的回应：
print_r($request->all());
exit();
问题是，我想还发送剩余的表格数据与 上传文件。在目前的情况下，有一个成功的文件上传它也到达服务器，但剩余的表单数据没有被发布到服务器什么是错误，我无法跟踪它？
而在悬浮窗部分追加数据它给像埃罗=>Uncaught TypeError: Cannot read property 'push' of undefined
'uploadMultiple'它是一个布尔值，你s但是，我正在使用'this.on（'uploadprogress'，function（file，progress，bytesSent），它将它设置为'真' – Onix
它仍然给这个错误=>'未捕获的TypeError：无法读取未定义的属性'追加' –