图片文件ajax异步上传

图片异步上传 + 预览

1、编写前端HTML页面代码

<form id="student-add-fm">
    <table>
        <tr>
            <th colspan="3">学生信息更改页面<input type="hidden" name="stuId"></th>
        </tr>
        <tr>
            <td>学号：</td>
            <td><input type="text" id="stuNumber" placeholder="学号" readonly></td>
            <td rowspan="12" width="300px">
                <img id="showPhoto" src="" width="100px" height="150px"><br>
                <input type="file" id="file" name="file" onchange="changeImg()">
                <input type="hidden" name="stuPhoto">
            </td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td>
                <input type="text" name="stuName" placeholder="姓名">
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="button" onclick="history.back()" value="返回">
                <input type="button" onclick="save()" value="保存">
            </td>
        </tr>
    </table>
</form>

2、编写文件域的改变事件，保存上传代码
使上传的图片实时展示到页面中


改变事件

<script>
    //文件域发生改变时的改变事件--图片预览
    function changeImg(){
        var fileReader = new FileReader();
        var file = document.getElementById('file').files[0];
        fileReader.readAsDataURL(file);
        fileReader.onload = function () {
            //document.getElementById('show').src = this.result;
            $("#showPhoto").attr('src',this.result).attr('hidden',false);
        }
    }
</script>

保存按钮的点击事件

1. 点击保存按钮后先上传图片
2. 将图片路径赋值到隐藏的标签中
3. 执行添加/修改请求

//保存按钮的点击事件
<script> 
    function save() {
        //上传文件
        var formData = new FormData($("#student-add-fm")[0]);
        $.ajax({
            url:"/student/uploadPhoto",
            type:"post",
            data: formData,
            cache:false,
            sync:false,
            processData: false,
            contentType: false,
            success:function (msg) {
                $("[name='stuPhoto']").val(msg);
            }
        })

        $.ajax({
            type:"post",
            url:"/student/updateStudentInfo",
            data:$("#student-update-fm").serialize(),
            sync:false,
            dataType:"json",
            success(res){
                if (res){
                    alert("修改成功");
                    location.href="/student/getList";
                }
            },
            error(res){
                if (res){
                    alert("修改失败！");
                    location.reload();
                }
            }
        })
    }
</script>

3、导入阿里上传文件oss工具类

public class OssUtil {

    public static String upload(MultipartFile file){
        try{
            // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
            String endpoint = "yourEndpoint";
            // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
            String accessKeyId = "yourAccessKeySecret";
            String accessKeySecret = "yourAccessKeySecret";
            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
            // 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
            // 依次填写Bucket名称（例如examplebucket）和Object完整路径（例如exampledir/exampleobject.txt）。Object完整路径中不能包含Bucket名称。
            String fielName = UUID.randomUUID().toString()+"_"+file.getOriginalFilename();
            ossClient.putObject("xxx", fielName, file.getInputStream());
            // 关闭OSSClient。
            System.out.println("文件上传成功===================");
            ossClient.shutdown();
            return "https://xxx.oss-cn-beijing.aliyuncs.com/"+fielName;
        }catch (Exception e){
            e.printStackTrace();
        }
        return null;
    }
}

3、编写后端代码

	@RequestMapping("/uploadPhoto")
    @ResponseBody
    public String uploadPhoto(MultipartFile file){
    	//返回的是文件路径
        return OssUtil.upload(file);
    }