使用Ajax异步上传文件

使用Ajax上传文件的应用场景颇多，比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。

下面贴相关代码示例:
html代码片段:

       <form class="layui-form" action=#" id=uploadForm">
    <div layui-form-item">
        <label layui-form-label">名称</label>
        <div layui-input-block">
            <input type=textconfig_name" placeholder=请输入配置名称" autocomplete=off"
                layui-input">
        </div>
    </div>


    <div layui-form-item layui-form-text">描述</label>
        <div ">
            <textarea id=config_desc请输入配置描述" layui-textarea"></textarea>
        </div>
    </div>

    <div ">文件</label>
        <div file" name=">
            <p help-block">请选择配置文件</p>
        </div>
    </div>




    <div ">
        <div ">
            <button layui-btnsave_config_file">立即提交</button>
            <button type=resetlayui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>

js代码片段:

//上传配置文件
$(#save_config_file").click(function () {

    var name = $(#config_name).val();
    var desc = $(#config_descvar userId = $(#userId).val();

    var formData = new FormData($(#uploadForm")[0]);

    formData.append(name,name);
    formData.append(descuserId'http://localhost:8090/bfi-web/api/ide/settings/uploadFiles'POSTasync: falselayervar layer = layui.layer;

                    layer.msg(returndata.returnMsg,{
                        icon: 1
                    });
                });

                setTimeout(() => {

                    closeLayui();

                },300);

            },error: function (returndata) {
                console.log(====================Error==========================);
            }
        });





});

Java代码片段(这里是SpringMVC+腾讯云对象存储,可将其更换为其它对象存储，如七牛云、ftp或者是其它对象存储):

 /**
    * 上传文件
    * @param request
    * @param file
    * @return
    */
@PostMapping(value=/uploadFiles",produces=application/json;charset=utf-8)
public JSONObject upModify(HttpServletRequest request,MultipartFile file) {
    
    JSONObject json = new JSONObject();

    try {
        
        COSClientUtil cosClientUtil =  COSClientUtil(); 

        if(!file.isEmpty()) {
            
            String name = cosClientUtil.uploadFile2Cos(file); 
               String desc = request.getParameter();
               String names = request.getParameter();
               String userId = request.getParameter();
               
               logger.info(desc:"+desc);
               logger.info(names:names);
               logger.info(userId:userId);
               
            图片名称
            logger.info(name = " + name);
            
            上传到腾讯云
            String imgUrl = cosClientUtil.getImgUrl(name); 

            logger.info(imgUrl =  imgUrl);
            
            数据库保存图片地址
            String dbImgUrl = imgUrl.substring(0,imgUrl.indexOf(?));
            logger.info(dbImgUrl =  dbImgUrl);
        
            IdeSettings ide =  IdeSettings();
            ide.setName(names);
            ide.setContent(dbImgUrl);
            ide.setUserId(userId);
            ide.setUpdateTime(DateUtil.date().toString());
            ide.setUploadTime(DateUtil.date().toString());
            ide.setDescription(desc);
            
            boolean isAddConfig = ideSettingsService.insert(ide);
            
            logger.info(isAddConfig);
            
            if(isAddConfig) {
                json.put(CommonEnum.RETURN_CODE,1)">000000);
                json.put(CommonEnum.RETURN_MSG,1)">上传成功);
            }else {
                json.put(CommonEnum.RETURN_CODE,1)">222222上传失败);
            }
            
    
            
        } {
            json.put(CommonEnum.RETURN_CODE,1)">111111);
            json.put(CommonEnum.RETURN_MSG,1)">参数异常);
        }
        
    } catch (Exception e) {
        e.printStackTrace();

        json.put(CommonEnum.RETURN_CODE,1)">333333);
        json.put(CommonEnum.RETURN_MSG,1)">特殊异常);

    }
       
       return json;
}