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

ゝ一世哀愁。 2023-09-28 14:42 22阅读 0赞

## 使用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");
                }
            });
        })

### 样式展示： ###

![在这里插入图片描述][1aeed78454474fa2b608667d03e54104.png]

## 二、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秒）
                            })
                        }
                    });

[1aeed78454474fa2b608667d03e54104.png]: https://img-blog.csdnimg.cn/1aeed78454474fa2b608667d03e54104.png

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关原生input标签实现ajax单文件上传和多文件上传

己还是一个菜鸟的时候，有次项目经理让我用Java做一个多文件上传的功能。那时候技术学得很渣，最多只能够实现单文件上传。做了一个星期都没有做出来，于是项目经理不留半点情面，...

男娘i/ 2024年04月17日 21:47/ 0 赞/ 162 阅读

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

使用ajax实现文件上传，使用input实现本地图片展示一、实现本地图片预览 HTML: <input type="file" id="choose

ゝ一世哀愁。/ 2023年09月28日 14:42/ 0 赞/ 23 阅读

相关使用webview实现小程序本地文件上传

更多文章请访问 [深的个人博客][Link 1] 最近因为公司有个小程序的项目需求是让用户上传本地文件（使用uni-app开发），查阅了小程序的api，发现小程序只开放了两个

约定不等于承诺〃/ 2023年01月13日 09:34/ 0 赞/ 934 阅读

相关使用elementUI实现将图片上传到本地

查阅饿了吗官方文档可以了解上传组件的使用方法。http://element.eleme.io/\/zh-CN/component/upload 前台的页面代码为：

青旅半醒/ 2022年06月08日 00:12/ 0 赞/ 367 阅读

相关 springMVC使用ajax实现文件上传

springMVC使用ajax实现文件上传一、上传之前的准备配置 1、依赖jar包和 mvc.xml文件配置，参考连接： [ https://www.cnb

╰+哭是因爲堅強的太久メ/ 2022年06月01日 08:49/ 0 赞/ 381 阅读

相关 ajax 实现文件上传

我们知道表单提交实现文件上传时，需要将表单的`enctype`值设置为`multipart/form-data` <form enctype="multipart/f

悠悠/ 2022年04月23日 14:40/ 0 赞/ 433 阅读

相关 ajax实现文件上传（使用FormData）

文件上传一般是同过表单来上传，但表单提交不满足所有情况，部分情况需要ajax上传文件 <input type="file" id="file"> js获取文件

系统管理员/ 2022年04月05日 05:29/ 0 赞/ 924 阅读

相关 Java实现图片上传预览（使用ajax提交）

html: <form id="form" action="action/servlet" method="post" enctype="multipart/form-dat

亦凉/ 2022年03月01日 02:52/ 0 赞/ 520 阅读

相关 js - 使用input标签实现上传文件夹和上传文件

最近做了一个项目，需要实现上传文件夹和批量上传文件的功能，发现input标签是可以实现这两个功能的，但是上传文件夹功能还不能兼容全部的浏览器，目前只有谷歌浏览器和Micros

「爱情、让人受尽委屈。」/ 2021年09月08日 22:18/ 0 赞/ 1229 阅读

相关 ajax实现文件上传

没有使用插件一、单文件上传 <!DOCTYPE html> <html> <head lang="en">

逃离我推掉我的手/ 2021年06月26日 16:06/ 0 赞/ 701 阅读