EasyUI jQuery fileBbox widget

EasyUI是一款基于jQuery实现的UI框架，其中fileBox就是一种可以用于上传文件的UI组件。在EasyUI中，jQuery fileBox widget提供了一些使用和扩展的方法，使得它能够满足更多的需求。

下面是使用EasyUI jQuery fileBbox widget的完整攻略：

前置条件

在使用EasyUI的jQuery fileBox widget前，需要先引入相应的JavaScript文件，如：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easyui.js"></script>

基础使用

通过以下代码，可以创建一个简单的fileBox组件：

<input id="filebox" class="easyui-filebox" name="photo" data-options="prompt:'请选择文件...'" />

$('#filebox').filebox({
    required: true,
    onChange: function(newValue, oldValue) {
        console.log('newValue: ' + newValue + ', oldValue: ' + oldValue);
    }
});

上述代码中，我们通过$('.easyui-filebox')来获取到fileBox组件，然后通过.filebox()方法对fileBox组件进行初始化。使用data-options属性可以设置该组件的一些参数，如prompt属性表示组件的提示文本，required属性表示组件是否必填。使用onChange方法可以监听组件值的变化，从而执行一些相应的操作。

文件上传

通过以下代码，可以实现文件上传功能：

<input id="filebox" class="easyui-filebox" name="photo" data-options="prompt:'请选择文件...', buttonAlign:'left', buttonText:'选择文件', accept:'image/*', onChange:fileboxOnChange" />

function fileboxOnChange(newValue, oldValue) {
    $('#form').form('submit', {
        url: 'upload.php',
        onSubmit: function(param) {
            param.fileName = newValue;
        },
        success: function(data) {
            console.log(data);
        }
    });
}

上述代码中，我们使用accept属性限制了文件类型为图片格式。通过onChange方法，当组件的值发生变化时，我们将提交表单到upload.php页面，并在提交表单数据前通过onSubmit方法设置了需要传递的参数，这里我们为上传的文件指定一个fileName参数。在上传成功后，我们可以通过success方法来处理上传成功后的返回结果。

多文件上传

通过以下代码，可以实现多文件上传功能：

<input id="filebox" class="easyui-filebox" name="photo" data-options="prompt:'请选择文件...', multiple:true, buttonText:'选择文件', onChange:multiFileboxOnChange" />

function multiFileboxOnChange(newValue, oldValue) {
    var files = $('#filebox')[0].files;
    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];
        console.log('name: ' + file.name + ', size: ' + file.size + ', type: ' + file.type);

        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
            }
        });
    }
}

上述代码中，我们通过设置multiple属性来实现多文件上传。在onChange方法中，我们通过遍历组件的files属性来获取选择的多个文件。对于每个文件，我们都创建一个FormData对象，把文件放入FormData中。然后通过$.ajax方法来上传文件，并在上传成功后通过success方法来处理返回结果。

以上就是使用EasyUI jQuery fileBbox widget的攻略。这里提供了两个示例，一个是文件上传示例，一个是多文件上传示例，希望能对你有所帮助。