jquery和layui上传图片

- 日理万妓 2023-07-24 02:21 4阅读 0赞

## 前言 ##

没有什么说的，后端代码省略，前端代码也是贴重要部分

## jquery上传图片 ##

`HTML代码`

<form enctype="multipart/form-data">
    	<input type="file" name="headerImg" id="headerImg"/>	
    </form>

`js代码`

var formData = new FormData();
        var imagSize = $("#headerImg").get(0).files[0].size;
        if(imagSize>1024*2000){ 
            Feng.error("图片大小要求在2兆以内");
            return;
        }
        var result =/\.[^\.]+$/.exec($("#headerImg").get(0).files[0].name);
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(result)) { 
            Feng.error("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
            return;
        };
        formData.append("file",$("#headerImg").get(0).files[0]);
        $.ajax({ 
            url:"/header/add", /*接口地址*/
            type:'post',
            data: formData,
            contentType: false,
            processData: false,
            success:function(res){ 
      
            },error:function (data) { 
             
            }
        })

## layui上传图片 ##

`HTML部分`

<div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <input type="hidden" name="img"/>
                <div id="img" style="width:150px;height:150px;border:1px solid #D2D2D2 !important"></div>
                <button type="button" class="layui-btn layui-btn-primary" id="imgBtn" style="margin-top: 20px;"><i class="layui-icon"></i>上传图片</button>
            </div>
        </div>

`js部分`

upload.render({ 
                elem: '#imgBtn' ,
                url:  config.base_server + 'api-file/files-anon',
                accept: 'file' ,
                auto: true ,
                before: function(obj){ 
                    layer.load(); //上传loading
                    //this.data={access_token:config.getToken().access_token};
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) { 
                        //$(".layui-upload-img").remove();
                        $('#img').append('<img src="' + result + '" width="150px" height="150px" alt="' + file.name + '" class="layui-upload-img">')
                    });
                },
                done: function(data){ 
                    layer.closeAll('loading');
                    console.log(data);
                    $("[name=img]").val(data.url);
                },
                error: function (data) { 
                    layer.closeAll('loading');
                }
            });

发表评论取消回复

表情：

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

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

相关阅读

相关 jquery和layui上传图片

前言没有什么说的，后端代码省略，前端代码也是贴重要部分 jquery上传图片 `HTML代码` <form enctype="multipart/fo

- 日理万妓/ 2023年07月24日 02:21/ 0 赞/ 5 阅读

相关 Layui图片上传组件使用指南

前言 Layui是一套非常棒的前端框架，页面简约美观，关键是非常容易上手，在开发中也是很多项目的首选。之前用Layui做过开发，现在整理一下Layui的文件上传组件，La

末蓝、/ 2023年07月04日 08:54/ 0 赞/ 7 阅读

相关 layui结合springboot上传图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

心已赠人/ 2022年11月13日 13:25/ 0 赞/ 172 阅读

相关原生js图片上传 jquery

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

野性酷女/ 2022年11月10日 03:46/ 0 赞/ 217 阅读

相关 jquery图片上传插件

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/499ea49778824e3

淩亂°似流年/ 2022年09月11日 13:24/ 0 赞/ 396 阅读

相关关于layui文件上传-- 多图片上传预览

<html> <head> <meta charset='UTF-8'> <meta name='Author'

忘是亡心i/ 2022年05月27日 01:17/ 0 赞/ 396 阅读

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 1. `<!DOCTYPE html>` 2.

亦凉/ 2022年05月11日 00:50/ 0 赞/ 832 阅读

相关 laravel使用layui进行图片上传

图片上传很多开发者都会遇到过，而一般为了用户体验性，我们图片上传都会做成无刷新提交，而最简单的是表单提交，但是用户体验性差，本篇博客就给大家介绍利用第三方插件[l

心已赠人/ 2022年04月12日 12:38/ 0 赞/ 305 阅读

相关 springboot+layui上传图片保存到服务器

最近给学校做了一个捐赠平台的项目，里面用到了上传图片保存到服务器的需求，在这里记录一下项目使用了springboot + layui html <div

柔光的暖阳◎/ 2021年11月13日 23:02/ 0 赞/ 626 阅读

相关 springMVC+jquery实现图片上传

需要的jar包，添加maven依赖 <dependency> <groupId>commons-fileupload</groupId>

心已赠人/ 2021年08月19日 15:13/ 0 赞/ 561 阅读