文件上传，html、js及Controller，完整代码

最新推荐文章于 2024-02-02 10:31:43 发布

Ag_yangyx

最新推荐文章于 2024-02-02 10:31:43 发布

阅读量6.8k

点赞数 2

文章标签：文件上传文件上传前端数据传递文件上传后台代码文件上传form表单提交文件上传的非表单提交

本文链接：https://blog.csdn.net/qq_38528283/article/details/88194899

版权

一、非form表单提交
html页面

<!DOCTYPE html>
<html>
 <head>
	 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>文件上传</title>
 </head>
 <body>
	 <div>
	      <input type="file" id="file" name="myfile" />
	      <input type="button" onclick="UpladFile()" value="上传" />
	</div>
 </body>

<script>
     /*附件上传*/
     function UpladFile() {
         var fileObj = document.getElementById("file").files[0]; // 获取文件对象
         var FileController = "../../upladFile";                    // 接收上传文件的后台地址
         // FormData 对象
         var form = new FormData();
         /*form.append("name", "tom");  */                      // 可以增加表单数据
         form.append("file", fileObj);                           // 文件对象
         // XMLHttpRequest 对象
         var xhr = new XMLHttpRequest();
         xhr.open("post", FileController, true);
         xhr.onload = function () {
             alert("上传完成!");
         };
         xhr.send(form);

     }
 </script>

二、form表单提交
html页面

<!DOCTYPE html>
<html>
 <head>
	 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>文件上传</title>
     <script type="text/javascript" src="../js/jquery.ui.widget.js?v=0.12"></script>
     <script type="text/javascript" src="..js/jquery.iframe-transport.js?v=0.12"></script>
     <script type="text/javascript" src="../js/jquery.fileupload.js?v=0.12"></script>
     <script src="../js/uploadPreview.js" type="text/javascript?v=0.12"></script>
 </head>
 <body>
	 <form action="../../upladFile" method="post" enctype="multipart/form-data">
           <input style="" type="file" name="files" accept=""/>
           <input type="submit" value="上传" id="fileupload4" />
     </form>
 </body>

<script>
     /*附件上传*/
     var isExple = false;
     $('#fileupload4').fileupload({
         dataType: 'json',
         progressall: function (e, data) {
             var progress = parseInt(data.loaded / data.total * 100, 10);
             if (progress > 99) {
                 alert("上传成功");
             }
         },
         done: function (e, data) {
             $('.progress-bar').text("上传成功");
         },
         success: function (result, textStatus, jqXHR) {
             if(isExple){
                 //set录入名称
             }
         },
     });
 </script>

Controller

@RequestMapping(params = "upladFile", method =  RequestMethod.POST)
    @ResponseBody
    public synchronized LinkedList<FileMeta> upladFile( MultipartHttpServletRequest request, HttpServletResponse response, HttpServletRequest request2) 
   	    Iterator<String> itr = request.getFileNames();
        while (itr.hasNext()) {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  
            SimpleDateFormat dateformat = new SimpleDateFormat("yyyy/MM/dd/HH");
            /** 构建文件保存的目录* */
            String logoPathDir = "/business/xfWei/upload/"
                    + dateformat.format(new Date());
            /** 得到文件保存目录的真实路径* */
            String logoRealPathDir = request.getSession().getServletContext()
                    .getRealPath(logoPathDir);
            /** 根据真实路径创建目录* */
            File logoSaveFile = new File(logoRealPathDir);
            if (!logoSaveFile.exists())
                logoSaveFile.mkdirs();
            /** 页面控件的文件流* */
            MultipartFile multipartFile = multipartRequest.getFile("file");
            /** 获取文件的后缀* */
            String suffix = multipartFile.getOriginalFilename().substring(
                                        multipartFile.getOriginalFilename().lastIndexOf("."));
            /** 使用UUID生成文件名称* */
            String logImageName = UUID.randomUUID().toString() + suffix;// 构建文件名称
            /** 拼成完整的文件保存路径加文件* */
            String fileName = logoRealPathDir + File.separator + logImageName;
            System.out.println("upload-》文件保存全路径" + fileName);
            File file = new File(fileName);
            try {
                FileCopyUtils.copy(mpf.getBytes(), new File(fileName));
                System.out.println("上传成功！");
            } catch (IOException e) {
                System.out.println("上传失败！");
                e.printStackTrace();
            }
            System.out.println("2.4 add to files");
            files.add(fileMeta);

            System.out.println("success uploaded=" + files.size());
        }
        return files;
    }

Ag_yangyx

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
文件上传，html、js及Controller，完整代码

一、非form表单提交html页面&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;title&gt;文件上传&lt;/ti
复制链接

扫一扫