首页 资讯 社群 我的社区 搜索

使用FormData实现文件上传!

高大上
2018-10-02 21:42:01

2018-11-15    补充

FormData  是H5新增加的函数。原来的form表单因为一些原因逐渐被淘汰,FormData  就是用来替代form的。起码我是这样认为的。

所有,原来form表单能传输的东西,用它都能传输,我是这样理解的。

 

-----------------------------------分隔线---------------------------------------------

        昨天我们聊了文件下载,今天来整理下文件上传!

        一般来说我们常用的文件上传有两种方式:

        1.通过form表单提交。

        2.通过Ajax提交。

        因为form表单提交时页面会出现刷新的情况,用户体验可能不那么好。我倾向使用ajax提交。以前我做文件上传时会使用一个js库:ajaxfileupload.js。通过他封装好的方法来实现文件上传。但是我今天发现一个新的写法。我也不确定是不是新写法,因为对ajaxfileupload.js我也没怎么细看,都是直接用的~~~

        说下今天的看到的写法:通过new FormData(),将全部数据,包括文件一起封装进去。代码如下:

//文件上传,js代码
function erpBatchImport() {
var fileType = $("#repFileUpdate option:selected").val();
console.log(fileType);
var fileDate = $("#exampleInputFile")[0].files[0];//获取文件数据
var filenamestr = $("#exampleInputFile").val();//获取文件url
var filename = filenamestr.substr(filenamestr.lastIndexOf("")+1);//从url中分离出文件名
var formdata = new FormData();//将文件名和文件一起封装到formdata对象中
formdata.append('fileDate',fileDate);
formdata.append('filename',filename);
console.log(fileDate);
$.ajax({
url: "./acceptExcelUpload.do",
type: "POST",
data:formdata,
contentType: false,
processData: false,
success:function (msg) {
console.log(msg);
}
})

java后端代码如下:

@Controller
public class controller {


    @RequestMapping("/acceptExcelUpload.do")
    @ResponseBody
    public String acceptanceFile(HttpServletRequest req) throws IOException, ServletException {
        InputStream in= req.getPart("file").getInputStream();
        String fileName = req.getParameter("filename");
        System.out.println(fileName);
        File file = new File(getClass().getResource("/").getPath()+fileName);
        System.out.println(getClass().getResource("/").getPath()+fileName);
        if (!file.exists()){
            file.createNewFile();
        }
        writeToLocal(getClass().getResource("/").getPath()+fileName,in);
        return "ok";
    }

    @RequestMapping("gethtml.do")
    public String gethtml(){
        return "fileupload";
    }


    /**
     * 将InputStream写入本地文件
     * @param destination 写入本地目录
     * @param input	输入流
     * @throws IOException
     */
    private void writeToLocal(String destination, InputStream input)
            throws IOException {
        int index;
        byte[] bytes = new byte[1024];
        FileOutputStream downloadFile = new FileOutputStream(destination);
        while ((index = input.read(bytes)) != -1) {
            downloadFile.write(bytes, 0, index);
            downloadFile.flush();
        }
        downloadFile.close();
        input.close();
    }


}

        这种方法最大的好处就是不用单独在引入一个js文件。并且FormData能将所有name,value结构的数据自动封装为一个对象,例如form表单。你可以把它当成一个不用JSON.stringify(arr[])的数组。在里面放对象也是没有问题的。但是记得后端取时使用req.getPart("key")获取输入流后再去。使用getParameter()只能获取到String。

        

用户评论 (3)
  • 高大上

    2018-10-03 22:55:35 高大上 1#

    木须虎

    多个文件一起上传,比如我们常见的在QQ空间、博客上传照片时,可以同时上传多张照片...

    应该是可以的。new FormData()允许放入多个文件对象。后端接收时需要使用@RequestParam MultipartFile[] files 注解

  • 木须虎

    2018-10-03 10:01:37 木须虎 2#

    如何实现的?


  • 木须虎

    2018-10-03 10:01:14 木须虎 3#

    多个文件一起上传,比如我们常见的在QQ空间、博客上传照片时,可以同时上传多张照片...