原生方式实现文件的上传

浏览器端

浏览器端:

	1、有一个HTML或者JSP页面作为展示
	2、必须使用form表单提交
	3、必须使用post方式提交 
	4、以前我们表单只需要action和method两个属性 想要做文件的上传必须添加encType = "multipart/form-data"属性
	5、输入框类型要是file类型 type="file"" 通过这个组件让用户
	简单代码如下:

在这里插入图片描述

服务器端

1、第一步导入依赖

需要的依赖有
	commons-fileupload-1.4.jar
	commons-io-2.6.jar

2、创建DiskFileiteamFactory工厂对象

//1、创建一个工厂(Disk磁盘的意思)工厂模式
        DiskFileItemFactory factory = new DiskFileItemFactory();

3、创建ServiletFileUpload对象 构造方法中传入DiskFileiteamFactory工厂对象

//2、创建一个ServletFileUpload 构造方法中需要工厂对象
        ServletFileUpload upload = new ServletFileUpload(factory);

代码如下:

在这里插入图片描述

4、使用ServiletFileUpload对象解析request对象 得到一个List对象 对象中包含一个普通组件或者一个文件

//3、通过upload解析request对象
            //(解析的目的是因为请求携带的信息都在request对象中)
            //(parse解析的意思例如parseInt parseURL)
            //需要处理异常 返回值是一个集合泛型是FileItem(item项目的意思)
            //这个集合中可能包含普通的组件和我们携带文件的组件
            //普通组件<input type="text" name="userName" value="">
            //携带文件的组件<input type="file" name="fileName" value="">
            //如何判断是普通组件还是携带文件的组件主要看input组件内type是不是file
            List<FileItem> fileItems = upload.parseRequest(request);

在这里插入图片描述

5、通过循环遍历集合内容获取集合内的每一个item元素 FileItem item可能是一个普通组件 也可能是一个携带文件的组件

判断是不是一个普通组件
在这里插入图片描述
else是一个文件 我们写入相应路径

在这里插入图片描述代码:

//4、遍历List<FileItem>对象
            for (FileItem f : fileItems) {
                //是不是一个普通的组件
                if (f.isFormField()) {//是普通组件 例如<input><from><div>
                    //注意如果是一个普通组件我们不能通过request.getParameter()来获取
                    //request对象以及被解析了
                    //这个方法用来获取普通组件的name值
                    //<input type="text" name="userName" value="">
                    //获取到的就是name="userName"里的userName
                    String key = f.getFieldName();
                    //getString()这个方法是获取input框提交的值的
                    String value = f.getString("utf-8");
                    //上面这两个相当于以前的String value = request.getParameter("key")
                    System.out.println(key + "=====" + value);
                } else {//是一个文件
                    //
                    String key = f.getFieldName();
                    String realName = f.getName();
                    //读取网络传输过来的数据
                    InputStream inputStream = f.getInputStream();
                    // 写入到
                    File file = new File("E:\\Idea2019-03\\项目\\fileUpload\\web\\file\\"+realName);
                    try {
                        f.write(file);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }

                }
            }

6、其他问题:我们能文件的上传可能会出现网络快发送的快但是写入的速度慢的问题,所以Tomcat帮我们做了一个缓存池 但是如果缓存池太小大文件传送失败

我们可以在DiskFileiteamFactory 对象有一个方法setSizeThreshold(102400)方法设置缓冲区的大小
设置缓冲区的位置DiskFileiteamFactory 对象有一个方法setRepositry(new File(“D:/test/file”))
设置文件上传大小 ServiletFileUpload对象setFileSizeMax(10243)单个文件上传大小 3M
设置文件上传总大小 ServiletFileUpload对象setSizeMax(1024
6);上传文件总大小 6M

完毕 我们试试

在这里插入图片描述
收到了
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用原生 JavaScript 实现文件上传,以下是一个基本的示例: HTML 代码: ```html <input type="file" id="file-upload" /> <button onclick="uploadFile()">上传文件</button> ``` JavaScript 代码: ```javascript function uploadFile() { var input = document.getElementById('file-upload'); var file = input.files[0]; var formData = new FormData(); formData.append('file', file); var request = new XMLHttpRequest(); request.open('POST', 'your-upload-url', true); request.onreadystatechange = function() { if (request.readyState === XMLHttpRequest.DONE && request.status === 200) { // 文件上传成功的处理逻辑 console.log(request.responseText); } }; request.send(formData); } ``` 上述代码中,我们首先获取文件上传表单元素和文件对象。然后,创建一个 FormData 对象,并将文件对象添加到其中。接下来,创建一个 XMLHttpRequest 对象,并使用 `open` 方法指定上传的 URL、请求方式等参数。 在 `onreadystatechange` 事件中,我们检查请求的状态是否为完成状态(`XMLHttpRequest.DONE`)且响应状态码是否为 200(表示成功)。如果满足条件,表示文件上传成功,可以在这里处理成功的逻辑。 最后,通过调用 `send` 方法发送请求,将文件上传到指定的 URL。请将 `'your-upload-url'` 替换为实际的上传地址。 注意:由于涉及到跨域请求,请确保上传地址的配置允许跨域请求。另外,此代码示例基于原生 JavaScript 实现,没有使用任何框架或库。如果你使用的是某个特定的框架或库,可能会有相应的上传方法或插件可用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值