Lebih
Question
Pilih dan unggah beberapa file
saya menggunakan kode ini untuk mengunggah file ke server (dalam html):
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label>upload file<input type="file" name="file" id="file" /></label>
<label><input type="submit" name="button" id="button" value="Submit" /></label></form>Ini membuka browser file dan membiarkan saya memilih file, dan ketika saya menekan Kirim file dikirim ke server saya.
Saya ingin tahu apakah ada cara untuk membuat beberapa file yang dipilih.
21
3
Pertanyaan ini memiliki :value jawaban dalam bahasa Inggris, untuk membacanya masuk ke akun Anda.
Solution / Answer
Pilih dan Unggah Beberapa File Menggunakan Spring Framework
Dalam posting ini saya menjelaskan kode sisi server dan sisi klien untuk beberapa unggahan file.
Kode berikut adalah untuk menyebutkan data multipart di appContext.xml
appContext.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- one of the properties available; the maximum file size in bytes -->
<property name="maxUploadSize" value="20971520"/>
</bean>Simpleupload.jsp:
skrip untuk beberapa unggahan file:
<script type="text/javascript">
var totalsizeOfUploadFiles = 0;
function getFileSizeandName(input)
{
var select = $('#uploadTable');
for(var i =0; i<input.files.length; i++)
{
var filesizeInBytes = input.files[i].size;
var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2);
var filename = input.files[i].name;
//alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes");
if(i<=4)
{
$('#filetd'+i+'').text(filename);
$('#filesizetd'+i+'').text(filesizeInMB);
}
else if(i>4)
select.append($('<tr id=tr'+i+'><td id=filetd'+i+'>'+filename+'</td><td id=filesizetd'+i+'>'+filesizeInMB+'</td></tr>'));
totalsizeOfUploadFiles += parseFloat(filesizeInMB);
$('#totalsize').text(totalsizeOfUploadFiles.toFixed(2)+" MB");
if(i==0)
$('#filecount').text("1file");
else
{
var no = parseInt(i) + 1;
$('#filecount').text(no+"files");
}
}
}
function CloseAndRefresh()
{
opener.location.reload(true);
self.close();
}
</script>desain formulir html:
<body>
<form method="post" id="uploadForm" action="upload" enctype="multipart/form-data">
<table class="span10">
<tr>
<td colspan="3">
<legend>Simple Upload</legend>
</td>
</tr>
<tr>
<td>
<input type="file" name="files[]" multiple="multiple" onchange="getFileSizeandName(this);"/>
</td>
</tr>
<tr>
<td colspan="3">
<div id="uploaddiv">
<table id="uploadTable" class="table table-striped table-bordered">
<tr>
<th>Title</th>
<th>Size</th>
</tr>
<tbody id="tbodyid">
<tr id="tr0">
<td id="filetd0" height="10px" width="50px"></td>
<td id="filesizetd0" height="10px" width="5px"></td>
</tr>
<tr id="tr1">
<td id="filetd1"></td>
<td id="filesizetd1"></td>
</tr>
<tr id="tr2">
<td id="filetd2"></td>
<td id="filesizetd2"></td>
</tr>
<tr id="tr3">
<td id="filetd3"></td>
<td id="filesizetd3"></td>
</tr>
<tr id="tr4">
<td id="filetd4"></td>
<td id="filesizetd4"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="filecount"></td><td id="totalsize"></td>
</tr>
</tfoot>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary" type="submit" id="startButton" onClick="CloseAndRefresh();">Start</button>
<button class="btn" id="cancelButton">Cancel</button>
</td>
</tr>
</table>
</form>
