jQuery 文件上传无法在formdata中设置第二个参数

Question

我正在使用 jQuery-file-upload 上传文件并设置表单数据如下：

actionUrl = '<c:url value="/nnmis/view/yjzh/addYjlx.tg"/>';
$('#fileupload').fileupload({
        url:actionUrl,
        formData:{pubdate:$('#formdate').datetimebox('getValue'),
            station:$('#formtype').combobox('getValue')
        },
        submit: function (e, data) {
            var station = $('#formtype').combobox('getValue');
            if(station == null || station==''){
                $.messager.alert('提示','所属站不能为空！','error');
                return false;
            }
        }
    });

在服务器端，formdata 中的第二个参数(station) 为空。但是如果我将它设置为常量，服务器端可以获得它：

formData:{pubdate:$('#formdate').datetimebox('getValue'),
            station:'sss'
        },

我确定 $('#formtype') 的组合框有价值，但服务器为空。是 jQuery-file-upload 的 bug 吗？

服务器端很正常的私有字符串变量 setter 和 getter:

private String station;
public String getStation() {
    return station;
}

public void setStation(String station) {
    this.station = station;
}
public void add() {
    try {
        String person = request.getSession()
                .getAttribute("session_personid").toString();
        String username = request.getSession().getAttribute("fr_username")
                .toString();
        String org = request.getSession().getAttribute("session_orgid")
                .toString();
        String serverDir = ServletActionContext.getServletContext()
                .getRealPath("/");
        if (!"\".equals(serverDir.substring(serverDir.length() - 1))) {
            serverDir = serverDir + "\";
        }
        if (station == null || station.isEmpty()) {
            throw new Exception("请选择所属站！");
        }
        JsonArray jArray = new JsonArray();
        if (files != null) {
            String origin = "";
            String format = "";
            String savename = "";
            String savePath = "";
            File ofile = null;
            for (int i = 0; i < files.size(); i++) {
                ofile = files.get(i);
                origin = filesFileName.get(i);
                format = origin.substring(origin.lastIndexOf("."));
                File waitSaveFile = new File(serverDir + "cloudFiles\"
                        + username + "\" + origin);
                if (waitSaveFile.exists()) {
                    int index = 0;
                    String temporigin = origin.substring(0,
                            origin.lastIndexOf("."));
                    do {
                        index = index + 1;
                        waitSaveFile = new File(serverDir + "cloudFiles\"
                                + username + "\" + temporigin + "("
                                + index + ")" + format);
                    } while (waitSaveFile.exists());
                    savename = temporigin + "(" + index + ")" + format;
                } else {
                    savename = origin;
                }
                waitSaveFile = null;
                savePath = serverDir + "cloudFiles\" + username + "\"
                        + savename;
                File saveFile = new File(savePath);
                FileUtils.copyFile(ofile, saveFile);
                yjlxdao.save(model);
                JsonObject jObject = new JsonObject();
                jObject.addProperty("name", filesFileName.get(i));
                jObject.addProperty("size", 1);
                jObject.addProperty("delete_type", "GET");
                jArray.add(jObject);
            }
        }
        outJsonPlainString(response, "{\"error\":false,\"files\":" + jArray.toString() + "}");
    } catch (Exception e) {
        // TODO: handle exception
        e.printStackTrace();
        logger.error(e.getMessage());
        outJsonPlainString(response, "{\"error\":true}");
    }
}

Answer 1

您可以尝试使用 fileuploadsubmit 事件，例如

actionUrl = '<c:url value="/nnmis/view/yjzh/addYjlx.tg"/>';
$('#fileupload').fileupload({
    url: actionUrl
});

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    data.formData = {
        pubdate: $('#formdate').datetimebox('getValue'),
        station: $('#formtype').combobox('getValue')
    };
    if (!data.formData.station) {
        $.messager.alert('提示', '所属站不能为空！', 'error');
            return false;
    }
});

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data

Answer 2

感谢@Arun P Johny，我找到了参数值。客户端：

<div id="dlg" style="width: 400px; height: 250px;" class="easyui-dialog" closed="true" modal="true" buttons="#dlg-buttons">
<div style="padding-left: 10px; padding-top: 10px;">
    <div style="float: center">
        <form id="fileupload" method="post" style="margin: 0; padding: 0" enctype="multipart/form-data">
            <table>
                <tr>
                    <td style="width: 60px">发布时间</td>
                    <td>
                        <input id="formdate" name="model.pubdate" class="easyui-datetimebox" style="width:180px"></input>
                    </td>
                </tr>
                <tr>
                    <td style="width: 60px">所属站</td>
                    <td>
                        <input id="formtype" name="model.station"  valueField="id" textField="name" class="easyui-combobox"
                             style="width: 180px;" url="<c:url value='/nnmis/view/system/findStationByOrgnumNodepPStation.tg'/>?orgnum_nodep=<%=session_orgnum_nodep%>"></input>
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="width: 60px">选择文件</td>
                    <td>
                        <span class="btn btn-success fileinput-button">
                            <i class="icon-plus icon-white"></i>
                            <span>选择文件</span>
                            <input type="file" id="formfile" name="files" multiple></input>
                        </span>
                        <div id="progress" class="progress">
                            <div class="bar" style="width: 0%;"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td valign="top">已上传：</td>
                    <td><div id="files" class="files"></div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div style="clear: both"></div>
</div>
<div id="dlg-buttons" style="text-align: center;">
    <a href="javascript:void()" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
</div>

$(function(){
    $('#dg').datagrid({onClickRow:function(index,data){
        var row=$('#dg').datagrid('getSelected');   
        if(row){
            var url = '<c:url value="/nnmis/view/ddrz_xhgz/findByIDTC.tg"/>?id='+row["id"];
            $('#vform').form('load',url);
        }
    }});
    $('#fileupload').fileupload({
        dataType: 'json',
        singleFileUploads:false,
        done: function (e, data) {
            if(data.result.error){
                $.messager.alert('提示','上传失败！','error');
            }else{
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
                $.messager.show({
                    title:'提示',
                    msg:'上传成功！',
                    showType:'slide'
                });
                $('#dg').datagrid('reload');
            }
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });
function addry(){
    var strdate = new Date();
    var stryear = strdate.getFullYear();
    var strmonth = strdate.getMonth() + 1;
    var strday = strdate.getDate();
    var strhour = strdate.getHours();
    var strminute = strdate.getMinutes();
    var strsecond = strdate.getSeconds();
    var upltime = stryear+'-'+strmonth+'-'+strday+' '+strhour+':'+strminute+':'+strsecond;
    //$('#myform').form('clear');
    $('#formdate').datetimebox('setValue',upltime);
    $('#formtype').combobox('setValue','');
    $('#files').empty();//清除已上传的文件列表
    $('#progress .bar').css(//还原进度条
            'width',
            0 + '%'
    );
    $('#dlg').dialog('setTitle', '新增路线图').dialog('open');
    actionUrl = '<c:url value="/nnmis/view/yjzh/addYjlx.tg"/>';
    $('#fileupload').fileupload({//动态设置url,参数
        url:actionUrl
    });
    $('#fileupload').bind('fileuploadsubmit',function(e,data) {
        data.formdata = {
            pubdate:$('#formdate').datetimebox('getValue'),
            station:$('#formtype').combobox('getValue')
        };
        //var station = $('#formtype').combobox('getValue');
        if(data.formdata.station == null || !data.formdata.station){
            $.messager.alert('提示','所属站不能为空！','error');
            return false;
        }
    });
}

服务器端：

public class YjlxtTg extends ActionSupport implements ServletRequestAware,
    ServletResponseAware {
private YjlxModel model;

private String pubdate;
private String station;
private List<File> files;
private List<String> filesFileName;
...
}

值在 model.station 中：

jQuery 文件上传无法在formdata中设置第二个参数

jQuery file upload can not set second parameter in formdata

jquery

file-upload

form-data

jquery-file-upload