Несколько файлов выбрать и загрузить - PullRequest
Новая
       1

Несколько файлов выбрать и загрузить

16 голосов
/ 29 декабря 2011

Я использую этот код для загрузки файлов на сервер (в формате 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>

Это открытый файловый браузер, и я могу выбрать файл, и когда я нажимаю Отправить, файл отправляется на мой сервер.

Интересно, есть ли способ выбрать несколько файлов?

Ответы [ 5 ]

46 голосов
/ 29 декабря 2011

Для этого вы можете использовать атрибут multiple, например: 

<input type="file" multiple />

Чтобы выбрать несколько файлов, вам нужно нажать клавишу Ctrl и нажать на файлы, которые вы хотите добавить.

11 голосов
/ 28 сентября 2012

Выбор и загрузка нескольких файлов с использованием Spring Framework

В этом посте я опишу код на стороне сервера и стороне клиента для загрузки нескольких файлов.

Следующий код предназначен для упоминания составных данных в 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:

скрипт для загрузки нескольких файлов: 

<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>

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>

Код UploadController.java: 

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public void UploadReceipts(@RequestParam("files[]") List<MultipartFile> file) throws Exception {
    logger.info(" Inside the upload receipts method "+file.size());
    for(int i=0; i< file.size(); i++)
    {
        if(!file.get(i).isEmpty())
        {
            CommonsMultipartFile cm = (CommonsMultipartFile) file.get(i);
            logger.info(" Inside the file upload method "+cm.getOriginalFilename());
            simpleUploadService.uploadFileandSaveReceipt(cm);
        }
    }   
}
4 голосов
/ 26 апреля 2014

если используется отправка нескольких файлов при отправке формы 

<input type="file" name="file[]" multiple>

, он создает массив файлов и может легко получить имя файла из этого массива.

2 голосов
/ 29 декабря 2011

Самый простой способ - расположить поля напрямую, например: 

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label>upload file<input type="file" name="file[]" id="file1" /></label>
<label>upload file<input type="file" name="file[]" id="file2" /></label>
<label>upload file<input type="file" name="file[]" id="file3" /></label>
<label><input type="submit" name="button" id="button" value="Submit" /></label></form>

Считайте это о том, как обрабатывать файлы на стороне сервера.

Однако, если вы хотите, чтобы что-то выглядело лучше, вам следует взглянуть на uploadify .

** Что касается ответа @dotwebs, атрибут множественного доступа не поддерживается некоторыми браузерами .

0 голосов
/ 17 марта 2014

Вы можете добавить несколько атрибутов, как это: 

<input type="file" multiple="true" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...