spring boot 下 ajax 上传文件

最新推荐文章于 2024-12-08 07:27:38 发布

原创最新推荐文章于 2024-12-08 07:27:38 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#上传文件

上传文件专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个文件上传功能的实现过程，包括HTML表单设计、JavaScript上传处理、后端控制器接收及文件上传到服务器的完整流程。涉及的知识点包括前端表单元素、FormData对象使用、Ajax异步请求、后端文件接收及处理等。

jsp:

<div class="modelFile fl">
    <form method="POST" enctype="multipart/form-data" id="fileUploadForm">
        <input type="file" fjid="fjid" tableid="${bjxx.id}" tasktype="${tasktype}" formid="fileUploadForm" onchange="uploadfile(this)" multiple="multiple" id="fileupload" name="files">
        <p class="models">
            <i class="icon"></i>
            点击上传
        </p>
    </form>
</div>

js：

/***
 * 附件上传
 * @param obj file-input对象
 */
function uploadfile(obj){
    var fjId_Obj=$(obj).attr("fjid");
    var formId_Obj=$(obj).attr("formid");
    var form = $("#"+formId_Obj)[0];
    var data = new FormData(form);
    var packageid=$("#"+fjId_Obj).val();
    $.ajax({
        url : "../newFiles/uploadFiles?packageid="+packageid,
        type : 'POST',
        enctype: 'multipart/form-data',
        data : data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        success : function(data) {
            if(data.isok="true"){
                $("#"+fjId_Obj).val(data.data.packageid);
                console.log(data);
                selectFile(data.data.packageid,obj);
                callback_Function(obj);  //可重写
            }else{
                utils.wrans.show("提示",data.message,function(){
                    return false;
                });
            }
        },
        error: function (e) {
            utils.wrans.show("提示",e.message,function(){
                return false;
            });
        }
    });
};

controller:

/**
 * 上传
 */
@RequestMapping("/uploadFiles")
@ResponseBody
public Map<String,Object> uploadFiles(@RequestParam("files") MultipartFile[] uploadfiles, String packageid){
   MultiValueMap<String, Object> param= new LinkedMultiValueMap<>();
   try {
      for (int i = 0; i < uploadfiles.length; ++i) {
         byte[] bytes = uploadfiles[i].getBytes();
         MultipartFile uploadfile = uploadfiles[i];
         ByteArrayResource arrRe = new ByteArrayResource(bytes){
            /**
             * This implementation always returns {@code null},
             * assuming that this resource type does not have a filename.
             */
            @Override
            public String getFilename() {
               try {
                  return URLEncoder.encode(uploadfile.getOriginalFilename(),"UTF-8");
               } catch (UnsupportedEncodingException e) {
                  return null;
               }
            }
         };
         param.add("files",arrRe);
      }
      param.add("packageid",packageid);
      ;
      Map<String,Object> resultMap = newfileControllerFeign.uploadFiles(param);
      return resultMap;
   } catch (Exception e) {
      e.printStackTrace();
      logger.error("上传文件:",e);
      return null;
   }
}