springmvc文件上传

来源：互联网发布：炉石传说 for mac 编辑：程序博客网时间：2024/05/21 08:53

前端代码：

<form id= "uploadForm">        <p >指定文件名： <input type="text" name="filename" value= ""/></p >        <p >上传文件： <input type="file" name="file"/></ p>        <input type="button" value="上传" onclick="doUpload()" />  </form>  function doUpload() {       var formData = new FormData($( "#uploadForm" )[0]);       $.ajax({            url: 'http://localhost:8080/xiaochangwei/file/upload' ,            type: 'POST',            data: formData,            async: false,            cache: false,            contentType: false,            processData: false,            success: function (returndata) {                alert(returndata);            },            error: function (returndata) {                alert(returndata);            }       });  }

后端：

@RequestMapping(value = "/upload", method = RequestMethod.POST)    public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model) {        System.out.println("开始");        String path = request.getSession().getServletContext().getRealPath("upload");        String fileName = file.getOriginalFilename();        // String fileName = new Date().getTime()+".jpg";        System.out.println(path);        File targetFile = new File(path, fileName);        if (!targetFile.exists()) {            targetFile.mkdirs();        }        // 保存        try {            file.transferTo(targetFile);        } catch (Exception e) {            e.printStackTrace();        }        model.addAttribute("fileUrl", request.getContextPath() + "/upload/" + fileName);        return "result";    }

如果前端有很多实体类数据同文件一同提交

可以修改后端方法为：

upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)

利用下面的代码更可实现带有进度条的文件上传

    <script type="text/javascript">        function UpladFile() {            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象            var FileController = "http://localhost:8080/xiaochangwei/file/upload";                    // 接收上传文件的后台地址             // FormData 对象            var form = new FormData($( "#uploadForm" )[0]);            // XMLHttpRequest 对象            var xhr = new XMLHttpRequest();            xhr.open("post", FileController, true);            xhr.onload = function () {               // alert("上传完成!");            };            xhr.upload.addEventListener("progress", progressFunction, false);            xhr.send(form);        }        function progressFunction(evt) {            var progressBar = document.getElementById("progressBar");            var percentageDiv = document.getElementById("percentage");            if (evt.lengthComputable) {                progressBar.max = evt.total;                progressBar.value = evt.loaded;                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";                if(evt.loaded==evt.total){                    alert("上传完成100%");                }            }        }      </script>        <br />    <br />    <br />    <br />    <progress id="progressBar" value="0" max="100"></progress>    <span id="percentage"></span>    <br />    <br />    <br />    <br />

<form id= "uploadForm">

    <input type="file" id="file" name="myfile" />

    <input type="button" onclick="UpladFile()" value="上传" />

</form>

0 0