In the last lesson, I learned how to load a network picture. In this lesson, I followed the code in the last lesson to write a picture loading program.

First, you can reuse the code loaded by the pictures from the previous lesson. What's new is a button, a Text label, and a FileDialog file dialog.

The specific code is as follows:

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.1

Window{

    visible: true;
    width: 600;
    height: 480;

    minimumWidth: 480;
    minimumHeight: 380;

    BusyIndicator{
        id:busy;
        running: true;
        anchors.centerIn: parent;
        z:2;

    }

    Text{
        id:statusLabel;
        visible: false;
        anchors.centerIn: parent;
        z:3;
    }


    Image{
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;

        onStatusChanged: {
            if(imageViewer.states === Image.Loading){
                busy.running = true;
                statusLabel.visible = false;
            }
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
            }
            else if(imageViewer.status === Image.Error){
                busy.running = false;
                statusLabel.visible = true;
                statusLabel.text = "ERROR";
            }
        }
    }

    Button{
        id:openFile;
        text:"Open";
        anchors.left: parent.left;
        anchors.leftMargin: 8;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 8;

        style: ButtonStyle{
            background: Rectangle{
                implicitWidth: 70;
                implicitHeight: 25;
                color:control.hovered?"#c0c0c0":"#a0a0a0";
                border.width: control.pressed ? 2 : 1;
                border.color: (control.hovered || control.pressed)? "green":"#888888";
            }
        }

        onClicked: fileDialog.open();
        z:4;
    }


    Text{
        id:imagepath;
        anchors.left: openFile.right;
        anchors.leftMargin: 8;
        anchors.verticalCenter: openFile.verticalCenter;
        font.pixelSize: 18;
    }

    FileDialog{
        id: fileDialog;
        title: "Please choose a file";
        nameFilters: ["Image Files (*.jpg *.png *.gif)"];
        onAccepted: {
            imageViewer.source = fileDialog.fileUrl;
            var imageFile = new String(fileDialog.fileUrl);
            imagepath.text = imageFile.slice(8);
        }
    }


}

Among them, FileDialog is the file dialog box in qml, which is used to select existing files and folders. It supports single selection and multi selection.
When multiple choices are needed, you can set the following properties.
selectMulitple: true；