ExtJS 6 - Como enviar um ficheiro sem usar o formulário?
o Ext JS fornece fileuploadfield que está junto com um botão para navegar em arquivos locais. Eu só preciso fazer upload de um arquivo usando assim que ele é selecionado a partir local, em vez de usar um botão enviar, a fim de desencadear o processo de post. Não foi possível encontrar um evento que é disparado após a selecção do ficheiro.
P. S. Na verdade, a versão que uso é Ext JS 6 mas acho que as soluções baseadas em versões anteriores também fazem o trabalho.
4 answers
Terá de usar um formulário se quiser enviar o ficheiro. Mesmo que você queira que o botão esteja numa barra de ferramentas, você poderá envolvê-lo num formulário e ele irá continuar a parecer um botão normal da barra de ferramentas (você terá de indicar a configuração da ui apropriada para isto).
Exemplo:
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
xtype: 'form',
padding: '10 0 0',
url: 'submit/image',
items: {
xtype: 'filefield',
buttonOnly: true,
width: 100,
buttonConfig: {
text: 'Add logo',
width: '100%',
ui: 'default-toolbar-small'
},
listeners: {
change: function (filefield) {
filefield.up('form').submit();
}
}
}
}, {
text: 'Remove logo'
}, '-', {
text: 'Discard changes'
}]
}]
A forma não é necessária. Você pode usar AJAX e FormData.
var file = s.fileInputEl.dom.files[0],
data = new FormData();
data.append('file', file);
Ext.Ajax.request({
url: '/upload/files',
rawData: data,
headers: {'Content-Type':null}, //to use content type of FormData
success: function(response){ }
});
Demo Online aqui
Embora concorde com a resposta do scebotari que, no seu caso, incorporar um formulário na barra de ferramentas é provavelmente a solução mais fácil, para responder à pergunta original:
Se você realmente não pode ou não quer usar um formulário e não está limitado em relação ao suporte do navegador, dê uma olhada no FileReader .
A ideia é ler o conteúdo do ficheiro do lado do cliente (JavaScript) e, em seguida, enviar os dados usando um pedido AJAX regular.
O seu o código pode parecer assim:
function (fileField) {
var file = fileField.fileInputEl.dom.files[0],
reader;
if (file === undefined || !(file instanceof File)) {
return;
}
reader = new FileReader();
reader.onloadend = function (event) {
var binaryString = '',
bytes = new Uint8Array(event.target.result),
length = bytes.byteLength,
i,
base64String;
// convert to binary string
for (i = 0; i < length; i++) {
binaryString += String.fromCharCode(bytes[i]);
}
// convert to base64
base64String = btoa(binaryString);
Ext.Ajax.request({
url: 'save-file.php',
method: 'POST',
params: {
data: base64String
}
});
};
reader.readAsArrayBuffer(file);
}
Está à procura do evento Mudança no campo FileUpload.
O código pode ser assim:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Upload Panel',
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...',
listeners: {
change: function (me, value, eOpts) {
console.log('trigger upload of file:', value);
}
}
}],
});