我只是在应用程序上启用功能，以便上传图像，将其转换为base64并作为base64字符串发送到服务器。
我发现了将图像转换为base64的功能。工作正常。我使用jqgrid standart表单来创建和编辑数据。图片上传，但是我需要在发布之前更改发布数据，以将base64字符串添加到参数值。
我使用serializeEditData，但是它的工作速度比我的函数将图像转换为字符串的速度快。我使用了回调函数，但它不起作用。
serializeEditData: function (postData) {
var fileContainer = document.getElementById('photo').files;
var reader = new FileReader();
reader.readAsDataURL(fileContainer[0]);
reader.onload = function () {
postData.image = reader.result;
};
/* I used this too
var fileContainer = document.getElementById('photo').files;
getBase64(fileContainer[0], function (result) {
postData.image = result;
});*/
return postData;
},
如果我在return语句之前控制台记录formData，它将显示带image base64字符串的postData。但是问题是，什么return语句比postData.image设置字符串更快。 我的getBase64函数代码：
function getBase64(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
callback(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
我的完整代码：
jQuery(function ($) {
var quiz_table_id = $("#quiz_table_id");
var quiz_pager_id = "#quiz_pager_id";
var colNames = ['id', 'title', 'description', 'section', 'section', 'image', 'image'];
var postDataGlobal;
var template = {width: 160, fixed: true, align: 'center', editable: true, stype: 'text'};
var colModel = [
{
name: 'id',
index: 'id',
sortname: 'id',
editable: true,
sorttype: 'number'
},
{
name: 'title',
index: 'title',
sortname: 'title',
template: template,
sorttype: 'number'
},
{
name: 'description',
index: 'description',
sortname: 'description',
width: 120,
fixed: true, align: 'center', editable: true,
template: "number",
sorttype: 'number'
},
{
name: 'section.name',
sortname: 'section.name',
formatter: null,
sorttype: 'number',
editable: false
},
{
name: 'section.id',
sortname: 'section.id',
formatter: 'select',
edittype: "select",
hidden: true,
editable: true,
editrules: {edithidden: true, required: true},
editoptions: {value: "1:Java"}
/*editoptions: {
dataInit: function (elem) {
$.get("http://localhost:8080/section/get-all-map", function (data, status) {
$(elem).empty();
Object.keys(data).map(function (key, index) {
console.log(data[key] + " " + key);
$(elem).append("<option value=" + key + ">" + data[key] + "</option>")
});
});
}
}*/
},
{
name: 'image',
index: 'image',
sortname: 'image',
template: template,
sorttype: 'number',
editable: true
},
{
name: 'photo',
index: 'photo',
search: false,
editable: true,
edittype: 'file',
editoptions: {
enctype: "multipart/form-data"
},
align: 'center',
}
];
quiz_table_id.jqGrid({
url: 'http://localhost:8080/quiz/get-all',
datatype: "json",
jsonReader: {
repeatitems: true
},
height: 'auto',
colNames: colNames,
colModel: colModel,
shrinkToFit: false,
forceFit: true,
pager: quiz_pager_id,
toppager: true,
rowNum: 10,
rowList: [5, 10, 15, 20, 25, 30],
loadonce: true,
colMenu: true,
menubar: true,
viewrecords: true,
storeNavOptions: true,
editurl: 'http://localhost:8080/quiz/save',
loadComplete: function () {
},
gridComplete: function () {
}
});
//navButtons
quiz_table_id.jqGrid('navGrid', quiz_pager_id,
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
search: true,
refresh: true,
view: true,
position: "left",
cloneToTop: false
},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
checkOnUpdate: true,
checkOnSubmit: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
serializeEditData: function (postData) {
var fileContainer = document.getElementById('photo').files;
var reader = new FileReader();
reader.readAsDataURL(fileContainer[0]);
reader.onload = function () {
postData.image = reader.result;
};
/* I used this too
var fileContainer = document.getElementById('photo').files;
getBase64(fileContainer[0], function (result) {
postDataGlobal.image = result;
});*/
return postData;
},
beforeSubmit: function (data) {
return [true, ''];
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
{
multipleSearch: true,
showQuery: true
} // search options - define multiple search
);
$(window).triggerHandler('resize.jqGrid');
quiz_table_id.triggerHandler("jqGridAfterGridComplete");
});
function getBase64(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
callback(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}