JavaWeb图片上传的几种方式

一、图片上传介绍

JavaWeb方向编程过程中,实现图片上传有三种方式:

1、传统的基于springMVC的MultipartFile类实现图片上传。

2、基于Ajax的图片上传。

3、基于Base64压缩的图片上传。

二、springMVC图片上传(springboot通用)

此方法的优点是可以将图片和其他的表单元素一起提交到服务器,服务器接受到的图片其实已经存储于容器的临时文件中,进行文件拷贝工作比较简单。

缺点是无法及时看到图片上传的预览效果,图片一旦选择错误只能重新提交。

注:红色代码为关键代码。

1、页面代码

<form action="/upload" method="post" enctype="multipart/form-data">
    选择头像:<input type="file" name="file" accept="image/*" /> <br>
    用户名字:<input type="text" name="userName"/> <br>
    <input type="submit" value="提交">
</form>

2、config.properties配置文件

**此配置文件内容在springboot中可以写在application.properties文件中**

file.location.path=d:/upload

3、spring-servlet.xml配置文件

**此配置文件在springboot中不需要配置 - “习惯大于配置”**

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!-- 设置使用注解的类所在的jar包 -->
    <context:component-scan base-package="org.lanqiao.service"/>
    <context:component-scan base-package="org.lanqiao.controller"/>
    <!--读取属性文件-->
    <context:property-placeholder location="classpath:config.properties" ignore-unresolvable="true"/>
    <!-- 注册HandlerMapping和HandlerAdapter组件 -->
    <mvc:annotation-driven/>
    <!-- 对静态资源文件的访问 支持访问WEB-INF目录 -->
    <mvc:default-servlet-handler/>
    <!-- 对转向页面的路径解析。prefix:前缀,suffix:后缀 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
            p:prefix="/" p:suffix=".jsp"/>
    <!--文件上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="104857600"/>
        <property name="maxInMemorySize" value="4096"/>
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>
</beans>

4、controller代码

@Controller
public class UserController {
    @Autowired
    UserService userService;
    @Value("${file.location.path}")
    private String fileLocation;
    @RequestMapping("/insert")
    public String insert(User user, MultipartFile file){
        String uri = FileUpload.upload(file,"/upload",fileLocation);
        user.setFacePic(uri);
        int ret = userService.insertUser(user);
        if(ret > 0 ){
            return "redirect:/get";
        }else{
            return "register";
        }
    }
}

5、上传工具类代码

public class FileUpload {
    /**
     * @param file 上传的文件
     * @param path 文件的虚拟路径,例如 /upload
     * @param fileLocation 文件的物理路径,例如d:/upload
     * @return 文件的虚拟路径+文件名
     *
     * fileName.lastIndexOf(".")为获取后缀名
     * UUID.randomUUID()为获取唯一标识,保证文件的唯一性
     */
    public static String upload(MultipartFile file, String path, String fileLocation) {
        String fileFinishName = null;
        try {
            // 如果目录不存在则创建
            File uploadDir = new File(fileLocation);
            if (!uploadDir.exists()) {
                uploadDir.mkdir();
            }
            //获取源文件名称
            String fileName = file.getOriginalFilename();
            fileFinishName = UUID.randomUUID() + fileName.substring(fileName.lastIndexOf("."), fileName.length());
            //上传文件到指定目录下
            File uploadFile = new File(uploadDir + uploadDir.separator + fileFinishName);
            file.transferTo(uploadFile);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
        return path + "/" + fileFinishName;
    }
}

二、基于Ajax的图片上传

这种方式同第一种方式一样都是使用multipart/form-data方式上传,服务器端同样使用springMVC(springboot)实现所以只有页面代码不一致,其他的部分(2、3、4、5)同上。

该方式前端使用的是jQuery的jquery.fileupload.js插件来实现。详见大神文章:https://blog.csdn.net/qq_37936542/article/details/79258158

1、页面先一用jQuery的插件

**顺序不能错误**

<script src="js/jquery-3.2.1.min.js"></script>
<!-- jquery file upload相关js -->
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-validate.js"></script>

2、HTML代码编写

**不需要form标签**

<style>
/* input样式 */
#uploadImg{
display: none;
}

/* button样式 */
#chooseFile{
background: #93b6fc;
}

#uploadFile,#rechooseFile {
display: none;
background: #93b6fc;
}

#image{
  width:200px;
  height:200px;
}

/* 进度条样式 */
.bar {
 background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);
 background-image: -o-linear-gradient(top,#5cb85c 0,#449d44 100%);
 background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));
 background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ff5cb85c‘, endColorstr=‘#ff449d44‘, GradientType=0);
 background-repeat: repeat-x;
 height: 20px;
 line-height: 20px;
 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
 -webkit-transition: width .6s ease;
 -o-transition: width .6s ease;
 transition: width .6s ease;
}
#progress {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffebebeb‘, endColorstr=‘#fff5f5f5‘, GradientType=0);
 background-repeat: repeat-x;
 height: 20px;
 width: 0%;
 margin-bottom: 20px;
 overflow: hidden;
 background-color: #f5f5f5;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
 box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
 margin-top: 20px;
}
</style>
<body>
    <div class="jquery-fileupload">
        <div class="">
            <input id="uploadImg" type="file" name="uploadImg" multiple style="display: none" />
                <button id="chooseFile">+选择文件</button>
                <button id="uploadFile">~开始上传</button>
                <button id="rechooseFile">+重新选择</button>
        </div>
        <div>
            <img id="image" src="">
        </div>
        <div id="progress">
            <div class="bar" style="width: 0%;"></div>
        </div>
    </div>
</body>

3、js代码

$(function() {
        $("#chooseFile").on("click", function() {
            $("#uploadImg").click();
        });

        $(‘#uploadImg‘).fileupload({
            url : ‘/FileTest/upload‘,//请求发送的目标地址
            Type : ‘POST‘,//请求方式 ,可以选择POST,PUT或者PATCH,默认POST
            //dataType : ‘json‘,//服务器返回的数据类型
            autoUpload : false,
            acceptFileTypes : /(gif|jpe?g|png)$/i,//验证图片格式
            maxNumberOfFiles : 1,//最大上传文件数目
            maxFileSize : 1000000, // 文件上限1MB
            minFileSize : 100,//文件下限  100b
            messages : {//文件错误信息
                acceptFileTypes : ‘文件类型不匹配‘,
                maxFileSize : ‘文件过大‘,
                minFileSize : ‘文件过小‘
            }
        })
        //图片添加完成后触发的事件
        .on("fileuploadadd", function(e, data) {
            //validate(data.files[0])这里也可以手动来验证文件格式和大小

            //隐藏或显示页面元素
            $(‘#progress .bar‘).css(
                ‘width‘, ‘0%‘
              );
            $(‘#progress‘).hide();
            $("#chooseFile").hide();
            $("#uploadFile").show();
            $("#rechooseFile").show();

            //获取图片路径并显示
            var url = getUrl(data.files[0]);
            $("#image").attr("src", url);

            //绑定开始上传事件
            $(‘#uploadFile‘).click(function() {
                $("#uploadFile").hide();
                jqXHR = data.submit();
                //解绑,防止重复执行
                $("#uploadFile").off("click");
            })

            //绑定点击重选事件
            $("#rechooseFile").click(function(){
                $("#uploadImg").click();
                //解绑,防止重复执行
                $("#rechooseFile").off("click");
            })
        })
        //当一个单独的文件处理队列结束触发(验证文件格式和大小)
        .on("fileuploadprocessalways", function(e, data) {
            //获取文件
            file = data.files[0];
            //获取错误信息
            if (file.error) {
                console.log(file.error);
                $("#uploadFile").hide();
            }
        })
        //显示上传进度条
        .on("fileuploadprogressall", function(e, data) {
            $(‘#progress‘).show();
             var progress = parseInt(data.loaded / data.total * 100, 10);
              $(‘#progress‘).css(
               ‘width‘,‘15%‘
              );
              $(‘#progress .bar‘).css(
               ‘width‘,progress + ‘%‘
              );
        })
        //上传请求失败时触发的回调函数
        .on("fileuploadfail", function(e, data) {
            console.log(data.errorThrown);
        })
        //上传请求成功时触发的回调函数
        .on("fileuploaddone", function(e, data) {
            alert(data.result);

        })
        //上传请求结束后,不管成功,错误或者中止都会被触发
        .on("fileuploadalways", function(e, data) {

        })

        //手动验证
        function validate(file) {
            //获取文件名称
            var fileName = file.name;
            //验证图片格式
            if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(fileName)) {
                console.log("文件格式不正确");
                return true;
            }
            //验证excell表格式
            /*  if(!/.(xls|xlsx)$/.test(fileName)){
                 alert("文件格式不正确");
                 return true;
             } */

            //获取文件大小
            var fileSize = file.size;
            if (fileSize > 1024 * 1024) {
                alert("文件不得大于一兆")
                return true;
            }
            return false;
        }

        //获取图片地址
        function getUrl(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

    });

原文地址:https://www.cnblogs.com/david1216/p/11515246.html

时间: 2024-10-13 12:18:01

JavaWeb图片上传的几种方式的相关文章

android/IOS常用图片上传的两种方式

android/IOS常用图片上传的两种方式: 1.上传到服务器的文件服务器(FileServer) 原理:上传到文件服务器的方式是先在服务器端搭建文件服务器,配置好路径(url),该路径是我们待会上传图片的路径,配置成功后便通过http+post的模式上传到文件服务器,同时文件服务器将返回一个图片ID,这个ID就是图片的唯一标识,并将该ID写入数据库保存,当需要下载该图片时只需要将此ID带上即可. 两个核心问题: (1)服务端:配置FileServer,并写处理响应上传图片的代码,这个值得去网

Java文件上传的几种方式

文件上传与文件上传一样重要.在Java中,要实现文件上传,可以有两种方式: 1.通过Servlet类上传 2.通过Struts框架实现上传 这两种方式的根本还是通过Servlet进行IO流的操作. 一.通过Servlet类上传 1.编写Sevlet类 package com.chanshuyi.upload; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.

文件上传的三种方式-Java

前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践.该博客重在实践. 一.Http协议原理简介 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HT

利用Selenium实现图片文件上传的两种方式介绍

在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当开发直接使用file类型的input实现图片文件的上传时,实例:<input type="file" name=''filename"> 我们可以直接利用Selenium提供的方法实现文件上传,但是因为依赖开发的实现,而且目前实现基本都会利用框架,所以这种实现方式有很

iOS:图片上传时两种图片压缩方式的比较

上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之前已经上传了的头像了,在项目中明显的不可行. 上传图片的正确方式:上传头像到服务器一般是将图片NSData上传到服务器,服务器返回一个图片NSString地址,之后再将NSString的路径转为url并通过url请求去更新用户头像(用户头像此时更新的便是NSString) 代码为: AFHTTPRe

SpringMVC文件上传的两种方式

搞JavaWEB的应该或多或少都做过文件上传,之前也做过简单的上传,但是如下的需求也确实把我为难了一把: 1.上传需要异步, 2.需要把上传后文件的地址返回来, 3.需要进度条显示上传进度. 项目使用SpringMVC架构+easyUI,初步分析,进度条可以使用easyui自带的进度条,上传可以使用ajaxFileUpload或者ajaxForm.文件传上去,然后把路径带回来是没问题的,关键是上传进度怎么获取.最终,两种方式都实现啦. 首先,不管哪种方式,后台对文件处理都是必须的.文件处理: 1

图片上传的两种形式

很早以前的单应用项目上传图片都是很简单的,上传图片后在controller层设置路径并且保存到服务器的某个路径下就行了,数据库中存储路径地址,最后在tomcat中设置一个虚拟路径就行了,很多年以前大多都是这么做的. 然而随着技术的更新迭代,SOA,微服务,这样的做法是会被淘汰的,如果是分布式部署或者集群环境,上传文件到各自的服务器上去,是无法做到统一的,那么就要用到图片服务器,之前我有提过fastdfs,这个是一个非常好用的文件服务器,这里不多说了.各个项目上传的图片都统一由文件服务器来管理,那

关于文件上传的几种方式

上传之前 JavaScript 检测 1:javascript判断上传文件的大小: 在FireFox.Chrome浏览器中可以根据document.getElementById(“idoffile”).size 获取上传文件的大小(字节数),而IE浏览器中不支持该属性,只能借助标签的dynsrc属性,来间接实现获取文件的大小(但需要同意ActiveX控件的运行). var ua = window.navigator.userAgent; if (ua.indexOf("MSIE")&g

python文件上传的三种方式

def upload(request): return render(request, 'upload.html') def upload_file(request): username = request.POST.get('username') fafafa = request.FILES.get('fafafa') with open(fafafa.name, 'wb') as f: for item in fafafa.chunks(): f.write(item) print(user