如何在grails 3中异步上传文件
How to upload file asynchronously in grails 3
我是 grails 框架的新手,我遇到了以下问题:
- 我想上传包含文件和一些详细信息(如标题、说明)的项目,并且我有非常大的 stl 3d 文件。虽然文件上传需要时间,但我希望用户进入下一页并填写项目的其余详细信息,如标题描述等。
我不知道我将如何做到这一点..我看过 grails ynch 编程,但我不知道如何实现它。
如果有人对此提供指导,我将不胜感激
前段时间我制作了一个包含文件上传的表单,我希望它可以异步完成。这花了很多谷歌搜索,不幸的是我不记得我使用过的任何参考资料,但这就是我最终所做的。
I included an onchange attribute on the file input that, when a file was selected, would call a javascript function to validate and upload the file asynchronously.
文件输入:
<input type="file" name="uploadMedical" id="uploadMedical" onchange="validateAndUpload(this, $(this));" accept=".pdf,.jpg,.jpeg" multiple>
JavaScript
(我已尽力去除与您的问题无关的代码,但仍留下足够的代码来帮助解决您的问题):
function validateAndUpload(input, documentInput){
var uploadForm = $("#uploadForm");
// Stop the browser from submitting the form.
uploadForm.submit(function(event) {
event.preventDefault();
});
// Get the selected files from the input.
var files = input.files;
// Create a new FormData object.
var formData = new FormData();
// Loop through each of the selected files.
for (var ii = 0; ii < files.length; ii++) {
var file = files[ii];
// Add the file to the request.
formData.append('supportingDocumentation', file, file.name);
}
//Include ID of record to associate this upload with
formData.append('id', getAppealId());
// Submit the form using AJAX.
$.ajax({
type: 'POST',
dataType : "html",
url: url_str,
data: formData,
processData: false,
contentType: false,
beforeSend:function(){
//indicate that the file is uploading
},
success:function(htmlData){
//display the new list of files on the page
},
error:function(ee){
//indicate that the upload failed
},
complete:function(){
//reset the file input so more files can be uploaded
}
})
}
我是 grails 框架的新手,我遇到了以下问题:
- 我想上传包含文件和一些详细信息(如标题、说明)的项目,并且我有非常大的 stl 3d 文件。虽然文件上传需要时间,但我希望用户进入下一页并填写项目的其余详细信息,如标题描述等。
我不知道我将如何做到这一点..我看过 grails ynch 编程,但我不知道如何实现它。
如果有人对此提供指导,我将不胜感激
前段时间我制作了一个包含文件上传的表单,我希望它可以异步完成。这花了很多谷歌搜索,不幸的是我不记得我使用过的任何参考资料,但这就是我最终所做的。
I included an onchange attribute on the file input that, when a file was selected, would call a javascript function to validate and upload the file asynchronously.
文件输入:
<input type="file" name="uploadMedical" id="uploadMedical" onchange="validateAndUpload(this, $(this));" accept=".pdf,.jpg,.jpeg" multiple>
JavaScript (我已尽力去除与您的问题无关的代码,但仍留下足够的代码来帮助解决您的问题):
function validateAndUpload(input, documentInput){
var uploadForm = $("#uploadForm");
// Stop the browser from submitting the form.
uploadForm.submit(function(event) {
event.preventDefault();
});
// Get the selected files from the input.
var files = input.files;
// Create a new FormData object.
var formData = new FormData();
// Loop through each of the selected files.
for (var ii = 0; ii < files.length; ii++) {
var file = files[ii];
// Add the file to the request.
formData.append('supportingDocumentation', file, file.name);
}
//Include ID of record to associate this upload with
formData.append('id', getAppealId());
// Submit the form using AJAX.
$.ajax({
type: 'POST',
dataType : "html",
url: url_str,
data: formData,
processData: false,
contentType: false,
beforeSend:function(){
//indicate that the file is uploading
},
success:function(htmlData){
//display the new list of files on the page
},
error:function(ee){
//indicate that the upload failed
},
complete:function(){
//reset the file input so more files can be uploaded
}
})
}