java web页面input type="file"文件上传

1 篇文章 0 订阅

页面input上传图片保存到本地并且展示图片

方法1:使用js方法进行图片展示,然后发送请求保存文件

1、点击上传文件按钮,触发点击事件
html页面
2、js文件,展示图片
js展示图片代码
3、文件上传,因为图片已经展示,只进行图片的上传。怕有些萌新不知道如何组合代码,将图片展示的代码也一起展示

		<script>
        // 为表单绑定异步上传的事件
        function uploadPic(img1, obj) {    // img1:img标签的id,点击事件传过来的值  obj:上传文件的input标签,点击事件传过来的this
            var img11 = $("#" + img1);  //获取img标签
            var file = $(obj);  //获取input文件上传input标签
            var explore = /.jpg$|.gif$|.png$|.bmp$/;  //设置文件格式
            if (explore.exec(file.val()) == null) {
                alert("图片格式不正确");
                file.outerHTML = file.outerHTML;
                return false;
            }
            var reader = new FileReader();    //新疆FileReader对象
            reader.readAsDataURL(file.get(0).files[0]);  //读取文件
            // reader.onloadstart = function () {   //展示图片开始前的函数
            // alert("开始展示时间");
            // }
            reader.onload = function () {  //展示文件函数,将路径赋值给img标签的src
                img11.prop("src", reader.result);
            }
            var formData = new FormData();  //新建一个FormData对象
            formData.append("file", file.get(0).files[0]);  //封装formData,根据键值对的形式进行封装
            formData.append("imgsrc", img11.attr("src"));  //将当前页面的img标签的src值封装到formdata中,由于本人项目中要使用该路径实现对修改前的文件进行删除
            $.ajax({
                url: ‘/123456’,    //此处填写ajax的请求方法
                type: 'POST',
                contentType: false,  //注意上传文件必须关闭这些,
                data: formData,
                processData: false,  // 还有这些
                dataType: 'text',  //返回值,视自己情况而定。返回提示信息
                success: function (data) {
                    // alert(data);
                    // img11.prop("src", data);  //将返回值赋值给img标签的src,进行图片的展示,不过第一种方法用不到,可注释掉
                    formData = new FormData();
                },
                error: function (data) {
                    alert("failed");
                }
            })
        }
    </script>

4、后台代码进行文件的保存

/**
*	RequestParam(“file”): formData中的name=“file”,指文件
*	String imgsrc:formData中的name="imgsrc",指路径
*	由于本次只有一个文件,故 MultipartFile 不用数组形式  // MultipartFile[]
*/
@RequestMapping("123456")
    @ResponseBody
    public String uploadPicture(@RequestParam("file") MultipartFile file, String imgsrc) throws Exception {
    	String filePath = "D://test";    //跟路径为本地D盘的test文件夹
        if(StringUtils.isNotBlank(imgsrc)){    //判断路径是否为空,如果不为空,说明已经有了一张图片,那我点击上传文件按钮就要替换掉这张图片,为了不占电脑容量,同时要删掉本地文件
            String initPicPath = filePath + imgsrc;
            File initFile = new File(initPicPath);
            if(initFile.exists() && initFile.isFile()){
                initFile.delete();    //删除文件
            }
        }
        String fileName = file.getOriginalFilename();    //获取文件名称
        //  以下为创建新存储的文件路径
        String upimages = "/upimage";   
        String uuidFileName = "/" + UUID.randomUUID().toString() + "1234567890" + fileName;
        String localPath = filePath + upimages;
        File upimagesFile = new File(localPath);  // 没有D://test/upimage文件夹的话就新疆文件夹
        if (!upimagesFile.exists()) {
            upimagesFile.mkdirs();
        }
        String localFilePath = localPath + uuidFileName;
        File picFile = new File(localFilePath);   //创建图片文件
        if (!picFile.exists()) {
            picFile.createNewFile();
        }
        file.transferTo(picFile);   //保存文件
		
		return "保存成功";    							//若使用方法1,则返回文件保存提示即可,或者不返回也行
        // return upimages + uuidFileName;   //若使用方法2,则返回文件路径
    }

方法2:使用ajax提交文件上传请求,将图片保存文件到本地,然后返回该文件的本地路径(相对路径还是绝对路径视自己项目情况而定),在ajax成功回调函数中将路径赋值给相应的图片标签

1、(同方法1)点击上传文件按钮,触发点击事件
2、js文件,使用ajax请求访问后台进行图片的保存(代码也同方法1,不过删除或注释掉页面图片展示js代码而已)

<script>
        // 为表单绑定异步上传的事件
        function uploadPic(img1, obj) {    // img1:img标签的id,点击事件传过来的值  obj:上传文件的input标签,点击事件传过来的this
            var img11 = $("#" + img1);  //获取img标签
            var file = $(obj);  //获取input文件上传input标签
            var explore = /.jpg$|.gif$|.png$|.bmp$/;  //设置文件格式
            if (explore.exec(file.val()) == null) {
                alert("图片格式不正确");
                file.outerHTML = file.outerHTML;
                return false;
            }
            // var reader = new FileReader();    //新疆FileReader对象
            // reader.readAsDataURL(file.get(0).files[0]);  //读取文件
            // // reader.onloadstart = function () {   //展示图片开始前的函数
            // // alert("开始展示时间");
            // // }
            // reader.onload = function () {  //展示文件函数,将路径赋值给img标签的src
            //     img11.prop("src", reader.result);
            // }
            var formData = new FormData();  //新建一个FormData对象
            formData.append("file", file.get(0).files[0]);  //封装formData,根据键值对的形式进行封装
            formData.append("imgsrc", img11.attr("src"));
            $.ajax({
                url: ‘/123456',
                type: 'POST',
                contentType: false,
                data: formData,
                processData: false,
                dataType: 'text',
                success: function (data) {
                    // alert(data);
                    img11.prop("src", data);
                    formData = new FormData();
                },
                error: function (data) {
                    alert("failed");
                }
            })
        }
    </script>

3、后台文件的处理,对文件进行保存,并且返回保存时候的路径,返回ajax的成功回调,将值赋给img标签的src,进行图片的展示(代码同方法1)
返回保存文件的路径
注意:前台展示图片路径如果使用js的FileReader,那么img标签的src值将会是js生成的自己的路径,不是本地文件保存的路径

感谢:FormData上传文件同时附带其他参数

  • 0
    点赞
  • 2
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

瞌睡的猫00

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值