Bootstrap Fileinput 4.4.7 file upload instance

The function of this example is to send e-mail with attachments. You can upload multiple attachments. The operation is to select an attachment and then upload it automatically. Then continue to select the attachment, fill in other information in the form, and click Save to send e-mail with attachments.

HTML tags

<input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/>

js initialization, setting global filename parameters

var fileName = [];
function initFileInput(id, url) {
        $("#" + id).fileinput({
            language: 'zh', 
            uploadAsync:false,
            uploadUrl:url,
            browseClass: "btn btn-secondary",
            textEncoding:"UTF-8",
            showUpload: false,
            showPreview :true,
            dropZoneEnabled: false,
            maxFileCount:5,
            fileActionSettings:{
                showUpload: true
            },
            enctype:'multipart/form-data',
            msgFilesTooMany: "Select the number of files to upload({n}) Exceeds the maximum allowed value{m}!",
        }).on("filebatchselected", function(event, files) {
            $("#fileUpload").fileinput("upload");
        }).on("filebatchuploadsuccess", function (event, data, previewId, index){
            if(data.response.success == true)
            {
                fileName.push(data.response.fileName);
            }else{
                alert("Upload failed!");
            }
            $("#fileUpload").fileinput("clear");
            $("#fileUpload").fileinput("reset");
        }).on('fileerror', function(event, data, msg) {
             alert(msg);
        });
    }

java background upload file code

@RequestMapping(value="/fileupload")
    @ResponseBody
    public Map<String, Object> fileUpload(HttpServletRequest request, HttpServletResponse response) {
        ResourceBundle bundle = PropertyResourceBundle.getBundle("application");
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
        Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();
        String rootPath = bundle.getString("upLoadUrl");
        String filePath = rootPath;
        Map<String, Object> map = new HashMap<>();
        map = uploadFiles(filePath,fileMap);
        return map;
    }

The actual upload operation returns the file name processed by the upload operation to ensure that the file name on the server side is unique

public Map<String, Object> uploadFiles(String savePath,Map<String,MultipartFile> fiLeMap){
        Map<String, Object> map = new HashMap<>();
        try {
            String fileName = "";
            if(fiLeMap!=null){
                for(Map.Entry<String, MultipartFile> entity:fiLeMap.entrySet()){
                    MultipartFile f = entity.getValue();
                    if(f != null && !f.isEmpty()){
                        String uuid = UUID.randomUUID().toString();
                        fileName = uuid + "#" + f.getOriginalFilename();
                        File newFile = new File(savePath + "/" + fileName); 
                        f.transferTo(newFile);
                    }
                }
            }
            map.put("success", true);
            map.put("fileName", fileName);
            return map;
        }catch (Exception e) {
            map.put("success", false);
            return map;
        }
    }

ajax submits a collection of other form parameters and passed attachment file names

$.ajax({
            type: "POST",
            url: Required request address,
            dataType: "json",
            traditional:true,
            data: {
                service:$("#service").select2('val').replace("All",""),
                startTime:$("#start").val(),
                endTime:$("#end").val(),
                reason:$("#reason").val(),
                fileName:JSON.stringify(fileName),
                outterEmail:isOutterEmail,
                innerEmail:isInnerEmail,
                isSendEmail:isSendEmail,
                subService:$("#subService").select2('val'),
                runningStatus:$("#runningStatus").select2('val')
            },
            success: function(data){
                $("#loadingModal").modal("hide");
                fileName.splice(0,fileName.length);
                alert(data.msg);
                if(data.success) {
                    location.href = "revision";
                }
            },
            error:function(xhr) {
                $("#loadingModal").modal("hide");
                alert("Save failed");
            }
        });

Leave a message if you have any questions

Tags: JSON Java

Posted on Tue, 05 May 2020 09:32:52 -0700 by moltenice