springmvc asynchronous upload and file upload

The basic configuration upload files, etc. to achieve springmvc file uploading and downloading already written, and written in a single file is uploading, this one is written primarily asynchronous multi-file upload;

Scenario: Upload Album function, mall upload thumbnails,

These functions require the user to know if the upload was successful in selected pictures after, and the number of pictures may be multiple, and therefore need to implement asynchronous multi-file download.

Background function needs to be changed much:

@Controller
public class FileController {


    private static final String PATH="H:\\IdeaSpace\\ce809\\out\\static\\upload\\";
    @RequestMapping("/file")
    @ResponseBody
    public List<String> file(@RequestParam(value = "img") MultipartFile[] files, HttpServletRequest request) {
        /*创建集合对象，用来存放上传后生成文件名*/
        List<String> fileNames = new ArrayList<>();
        for (int i = 0; i < files.length; i++) {
            MultipartFile file = files[i];
            /*生成文件名*/
            StringBuilder filePath = new StringBuilder(PATH);
            filePath.append(UUID.randomUUID().toString());
            String fileName = file.getOriginalFilename();
            filePath.append(fileName.substring(fileName.lastIndexOf(".")));

            File localFile = new File(filePath.toString());

            if (!localFile.getParentFile().exists())
                localFile.mkdirs();
            try {
                file.transferTo(localFile);
               /*上传成功，将文件名添加到集合中*/
                fileNames.add(localFile.getName());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
//        返回集合
        return fileNames;
    }
}

Multi-file upload, use an array when only mass participation in the background like a junction reference, below is a front end code to implement asynchronous upload, you need a plug-js:

Front-end multi-file upload, multiple input labels, use the same name to achieve the desired effect:

However, this method is not efficient, because if you need to upload photos, the number of files for a long time, too much trouble, so there is no way wanted to be able to in a time input box, select the file by ctrl key to select multiple files:

<form id="fileUpForm" method="post" enctype="multipart/form-data">
    <!--multiple="multiple"实现选择多个文件-->
    <input type="file" name="img"  multiple="multiple">
    <input type="button" onclick="fileUp()" value="上传">
</form>
<div id="img"></div>

js asynchronous code:

<script>
    function fileUp() {
        /*ajaxSubmit是jquery.form.js封装好的方法*/
        $("#fileUpForm").ajaxSubmit({
            type:"post",
            url:"${pageContext.request.contextPath}/file",
            success:function (data) {
                $.each(data,function (index, item) {
                    $("#img").append('<img src=static/upload/'+item+' width="100px"/>');
                })
            },
            error:function (xhr, msg) {
                alert(msg);
            }
        })
    }
</script>

Upload picture above is an example, after asynchronous upload, ask a set of names will be generated on a server returns allow users to check whether a successful upload if there are other types of files can be generated by different labels suffix judgment.

springmvc asynchronous upload and file upload

Guess you like