jfinal多文件上传后台files.size()只有一个的解决方法

描述:看这个吧! jfinal附件上传选择多个,后台files.size()只有一个
问题大致情况
页面:

//页面
<form method="post" id="fileForm" enctype="multipart/form-data">
	<input type="file" value="" name="file" multiple="multiple" />
</form>

Controller:

//上传时选择多个文件,这里始终只有一个
List<UploadFile> files = getFiles();

这里的files值始终只有一个,单文件上传没有问题;看了相关文章,各有各的说法,最终尝试给解决,记录下:

多文件使用场景:
一般来说是在from表单里面有上传文件的,而上传文件都是以异步的方式上传(也是一个from表单);
如果在from 表单里直接嵌套文件上传的form表单,这样可能会出现其他的问题(两个表单都会提交…);
解决此情况的方法:
①在原来form表单里写一个input框,加上一个Onclick()事件
②在原来form表单外写一个上传文件的from表单,上面的Onclick()事件直接调用这里的上传input框,见下面例子:

<!-- loadFile() 将上传成功文件的文件名返回到原form表单的input框中 -->
<form method="post" id="fileForm" enctype="multipart/form-data">
	<!-- -->
	<input type="file" value="" id="file" name="file[]" multiple="multiple" style="display: none;" onchange="loadFile(this)"/>
</form>

<form id="form1" method="post">
	...
	<div class="form-group">
		<label class="col-sm-4 control-label">图片:</label>
		<div class="col-sm-5 right" id="div_gztp">
			<!-- 记录文件上传成功后返回的信息,这里是文件id -->
			<input type="hidden" id="file_ids" name="rec.file_ids" />
			<!-- 为了增强体验效果,加的一个上传动画 -->
			<input id="input_file" name="fileTitle" type="text" value="请选择需要上传的图片" onclick="uploadImage();" class="form-control" readonly="readonly" style="border-radius:0px;"/>
		</div>
		<div class="input-group">
			<!-- 不自动上传,选择文件后点击此按钮才进行上传 -->
			<button class="btn btn-primary" style="border-radius:0px;" id="uploadFile">上传</button>
		</div>
	</div>
	...
</form>

JavaScript的写法

//fileForm 为上传文件的form表单的id
$("#fileForm").submit(function() {
	$("#uploadFile").attr("disabled", true);
	if($("#file").val() == "") {
		alert("请选择需要上传的图片。");
		$("#uploadFile").attr("disabled", false);
	} else {
		$("#uploadFile").text("正在上传...");
		submitFile();
	}
	return false;
});

function submitFile() {
	//将正在上传的gif给显示出来
    $(".loading").show();
    var formData = new FormData();
    //这里是关键,把选择的多文件对应的一个name值变成多个name值,
    //这里就是导致为什么后台只有一个文件的原因
    for(var i=0; i<$('#file')[0].files.length;i++){
        var sdf = $('#file')[0].files[i];
        formData.append('file['+ i +']', $('#file')[0].files[i]);
    }
    $.ajax({
        type: "post",
        url: basePath + "/order/uploadFile",
        data: formData,
        //下面这两个属性要加上,不然要报后面的错误
        processData: false,//Uncaught TypeError: Illegal invocation
        contentType : false,
        success: function(result) {
            if(result.flag){
            	//框架自带弹框,根据使用的框架自行更改
                ui.success("文件上传成功。");
                $('#file_ids').val(result.ids);
                clearFile();
                //更改标识
                $('#is_upload').val('end');
            } else {
            	//result.error自己封装返回到页面的信息
                ui.error(result.error);
            }
            loadingHideorDisabled();
        },
    });
}

这样后台再使用List<UploadFile> files = getFiles();就能获取到多个文件了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值