3.11 Basic usage of Ext JS file upload

The component corresponding to file upload is Ext.form.field.File. The effect of the component is the input box + file selection button, as shown in the following figure:

Click the "Select file button", a dialog box for selecting a file in the operating system will pop up, as shown in the following window:

After selecting the file, the input box will display differently according to different browsers, some browsers are the file name, some browsers are the full path, and some browsers are the fake path with fakepath.
The internal mechanism of Ext JS to realize the file selection field is to use the hidden file input element to realize the file upload function, and upload the file when the form is submitted. The standard Ajax method is not used here, but the file upload component can be extended to use Ajax to upload asynchronously , which will continue to be introduced in later chapters of this series.

Demo code for single file upload field

The complete demo code for the file upload field above is as follows:

{
        xtype: 'form',
        title: '上传文件',
        width: 400,
        bodyPadding: 10,
        items: [{
            xtype: 'filefield',
            name: 'myfile',
            fieldLabel: '文件',
            labelWidth: 50,
            msgTarget: 'sid