使用ajax实现文件上传，使用input实现本地图片展示

我认不到你

已于 2022-07-28 17:29:14 修改

阅读量703

点赞数 1

分类专栏：前端文章标签： ajax javascript 前端

于 2022-07-12 14:53:39 首次发布

本文链接：https://blog.csdn.net/qq_57581439/article/details/125743146

版权

前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

使用ajax实现文件上传，使用input实现本地图片展示

一、实现本地图片预览

HTML:

<input type="file" id="chooseImage" name="myfile"  value="" class="layui-btn">
<!-- 保存用户自定义的背景图片 -->
<img style="width: 150px;height: 150px;display: none" id="cropedBigImg" value='custom' alt="lorem ipsum dolor sit" data-address='' title="自定义背景"/>

JS：（使用JQuery）

    $(function (){
        $('#chooseImage').on('change',function(){
            if ($(this)[0].files[0]==null){
                $('#cropedBigImg').css("display","none");
            }else {
                var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
                    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
                    src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

                // 检查是否是图片
                if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
                    $('#cropedBigImg').css("display","none");
                    error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
                    return;
                }

                // $('#cropedBigImg').attr('src',src);
                $('#cropedBigImg').attr('src',src).css("display","inline-block");
            }
        });
    })

样式展示：

在这里插入图片描述

二、AJAX上传文件

关键代码：

var formData = new FormData();
formData.append("myfile", $("#chooseImage")[0].files[0]);

//ajax参数：
 $.ajax({
                    type: "post",
                    url: "/index/reviseAdminInfo",
                    data: formData,
                    cache: false, //上传文件不需要缓存
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function(data){
                    }
     )}

全部代码：

                var formData = new FormData();
                if($("#chooseImage")[0].files[0]!=null){
                    formData.append("myfile", $("#chooseImage")[0].files[0]);
                }
                formData.append("adminUserName",data.field.adminUserName);
                formData.append("adminPassword",data.field.adminPassword);
                formData.append("adminId",data.field.adminId);
                $.ajax({
                    type: "post",
                    url: "/index/reviseAdminInfo",
                    data: formData,
                    cache: false, //上传文件不需要缓存
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function(data){
                        console.log(data==="1")
                        if (data==="1"){
                            layer.msg("修改成功",{
                                icon: 1,
                                time: 1500 //2秒关闭（如果不配置，默认是3秒）
                            },function (){
                                miniTab.deleteCurrentByIframe();
                            })
                        }else {
                            layer.msg("修改失败",{
                                icon: 2,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            })
                        }
                    },
                    error: function (){
                        layer.msg("修改失败",{
                            icon: 2,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        })
                    }
                });
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        })
                    }
                });