Question

我必须从dropzone.js移动到Fine Uploader，因为第一个上缺少客户端调整大小图像功能。因此，我现在遇到一些问题，试图获得与dropzone相同的结果。

我需要将一些隐藏的输入字段附加到要上传的图像上，这很容易在dropzone上进行。我已经尝试了Docs中描述的Form选项，但它将所有表单元素发送到表单操作，但我只需要将少量数据发送到不同的页面以在服务器端执行Ajax请求（希望它确实有意义））

我需要追加的输入字段是：

我正在使用的脚本：

 $(document).ready(function () {
    $('#fine-uploader').fineUploader({
            template: 'qq-template',
            form: {
                element: 'modulomezzi',
                autoUpload: true
            },
            request: {
                endpoint: 'ajax_page.asp',
                inputName: 'foto_gallery1'
            },
            thumbnails: {
                placeholders: {
                    waitingPath: '/fine-uploader/placeholders/waiting-generic.png',
                    notAvailablePath: '/fine-uploader/placeholders/not_available-generic.png'
                }
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
            }
        });
});

由于

Answer 1

您可以使用下面的request.params选项：

var uploader = new qq.FineUploader({
        element: document.getElementById("uploader"),
        template: 'qq-template',
        request: {
            endpoint: '/api/saveimage',
            params: {'param1': 'someValue', 'param2': document.getElementById('textInputId').value},
        },
        thumbnails: {
            placeholders: {
                waitingPath: '/img/fine-uploader/waiting-generic.png',
                notAvailablePath: '/img/fine-uploader/not_available-generic.png'
            }
        },
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            itemLimit: 3
        },
    });

您也可以随时使用setParams API在js中设置参数：

var params = {'param1': 'somevalue1', 'param2': 'somevalue2'};
uploader.setParams(params);

请参阅doc：setParams

Answer 2

好的，这是解决方案，感谢@tropicalfish指出我正确的方向。

import React = require('react');

interface ITestState {
    selectedValue: string;
}

export class Test extends React.Component<{}, ITestState> {

    constructor() {
        super();
        this.state = { selectedValue: "A" };
    }

    change(event: React.FormEvent<HTMLSelectElement>) {
        // No longer need to cast to any - hooray for react!
        var safeSearchTypeValue: string = event.currentTarget.value;

        console.log(safeSearchTypeValue); // in chrome => B

        this.setState({
            selectedValue: safeSearchTypeValue
        });
    }

    render() {
        return (
            <div>
                <label htmlFor="searchType">Safe</label>
                <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <h1>{this.state.selectedValue}</h1>
            </div>
        );
    }
}

Fine Uploader：如何将输入隐藏字段附加到autoupload？

2 个答案: