web-文件上传（FormData）

最新推荐文章于 2024-08-18 21:06:49 发布

m0_66357705

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量253

点赞数 4

文章标签：前端 FormData

本文链接：https://blog.csdn.net/m0_66357705/article/details/140426049

版权

FormData

快速入门

web前端

<!-- 注意 目前使用tomcat + servlet -->
<body>
<input id='file-sender' type='file' accept = 'image/*'>
<!--
type:指定input的类型为文件上传
accept:接受的文件为所有图片文件
-->
<img src='' style='width: 500px;height: 500px' alt="test" id="img-show"/>
</body>
<script>
    let fd = new FormData()
    let FileTag = document.getElementById('file-sender')
    let img_show = document.getElementById('img-show')
    FileTag.onchange = function(){
        let file = FileTag.files[0]
        fd.append('file',file)
        // fd.append(file_name,file) ==> 文件名  + 文件可以多个
        /*
         fd.append('file1',file1)
         fd.append('file2',file2)
         fd.append('file3',file3)
        */
        
        console.log(fd.get('file'))
        //小小的展示一下图片--------
        let url = URL.createObjectURL(file)
        img_show.src = url;
        /* 或者使用FileReader
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function(){
            img_show.src = reader.result;
        }
         */
        //-------------------------
        
        //发送请求'http://localhost:8080/upload'是你自己的url
         fetch('http://localhost:8080/home/file',{
            method:'POST',
            body:fd
        }).then(res=>res.json()).then(res=>{ //这里是接收服务器返回的数据
            alert('上传成功' + res)
            console.log(res)
        }).catch(err=>{ //这里是接收fetch请求错误
            alert('请求错误' + err)
            console.log(err)
        });

    }
</script>

web-后端

@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取上传的文件部分
        Part filePart = request.getPart("file"); //前端的 fd.append(file_name,file) 我之前的file_name:'file'
        String fileName = Paths.get(filePart.getSubmittedFileName()).getFileName().toString(); // MSIE fix.

        /*
        // 获取文件输入流
        try (InputStream fileContent = filePart.getInputStream()) {
            // 将文件保存到服务器上的某个位置
            Files.copy(fileContent, Paths.get("/path/to/destination/" + fileName));
        }
        */

        response.getWriter().print("恭喜恭喜！！！!");
    }
}

FormData方法

方法名	描述	使用示例
append()	向`FormData`对象添加一个字段和对应的值。如果字段已存在，则追加新值。	`formData.append('username', 'user1');`
delete()	从`FormData`对象中删除指定的字段。如果删除的字段不存在，不会做任何事情。	`formData.delete('username');`
get()	获取指定字段的第一个值。如果字段有多个值，返回第一个值；如果字段不存在，返回`null`。	`const value = formData.get('key');`
getAll()	获取指定字段的所有值，返回一个数组。如果字段有多个值，返回一个包含所有值的数组；如果字段不存在，返回一个空数组。	`const values = formData.getAll('key');`
has()	检查`FormData`对象中是否存在指定字段。如果字段存在，返回`true`；否则，返回`false`。	`if (formData.has('key')) { ... }`
set()	设置指定字段的值，如果字段已存在，则替换现有的值。如果字段不存在，将创建一个新的字段并设置其值。【有多个字段相同将会更新第一个找到的键的值】	`formData.set('key', 'value');`
entries()	返回一个迭代器对象，用于遍历`FormData`对象的键值对。迭代器对象将返回键值对组成的`Array`对象，每个键值对是一个包含键和值的数组。	`for (let pair of formData.entries()) { console.log(pair); }`
forEach()	遍历`FormData`对象的每个键值对，并执行指定的回调函数。回调函数接受三个参数：键、值和索引。	`formData.forEach((value, key, formData) => { console.log(`${key}: ${value}`); });`
keys()	返回一个迭代器对象，用于遍历`FormData`对象的键。迭代器对象将返回`FormData`对象的键组成的`Array`对象。	`for (let key of formData.keys()) { console.log(key); }`
values()	返回一个迭代器对象，用于遍历`FormData`对象的值。迭代器对象将返回`FormData`对象的值组成的`Array`对象。	`for (let value of formData.values()) { console.log(value); }`
Symbol.iterator	返回一个迭代器对象，用于遍历`FormData`对象的键值对。这是`FormData`对象的一个迭代器方法，它允许你使用`for...of`循环遍历`FormData`对象中的键值对。	`for (let [key, value] of formData) { console.log(`${key}: ${value}`); }`