jQuery file upload can not set second parameter in formdata

Question

I'm using jQuery-file-upload to upload files and set formdata as below:

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;
            }
        }
    });

at server side, the second parameter(station) in formdata is null. But if i set it to a constant the server side can get it:

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

I'm sure the combobox of $('#formtype') have value but the server get null. Is it a bug of jQuery-file-upload? enter image description here

enter image description here

The server side is quite normal of a private String varible with setter and 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}");
    }
}

Arun P Johny · Accepted Answer · 2015-03-09 04:12:01Z

1

You can try to use the fileuploadsubmit event like

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

answered Mar 9, 2015 at 4:12

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joshua Over a year ago

Thank you but seems not working. it have data at client side but null at server side.

Arun P Johny Over a year ago

then have a look at the value returned by $('#formdate').datetimebox('getValue')

Joshua Over a year ago

I debug the code in chrome and seems it does have value. I uploaded an image at <img src="i.sstatic.net/vQLEo.jpg" /> and re-edit this question for adding server side code.

Arun P Johny Over a year ago

@Joshua Also in the servlet try station = request.getParameter("station")

Joshua Over a year ago

Thank you. I guess I had found the parameter value but it saves as model.station but not station. model is a form variable defined in server and in client side: <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> I don't understand why the data not send as station but encapsulated into model.Thank you very much!

Joshua · Accepted Answer · 2015-03-09 06:19:30Z

Thanks to @Arun P Johny I had found the parameter value. client side:

<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;
        }
    });
}

server side:

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;
...
}

the value was in model.station: enter image description here

Collectives™ on Stack Overflow

jQuery file upload can not set second parameter in formdata

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related