(前后端交互式)Ajax上传图片 + 更换背景图片

这篇具有很好参考价值的文章主要介绍了(前后端交互式)Ajax上传图片 + 更换背景图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前后端交互图片文件

上传-图片

注意1:上传的图片必须在2MB以内
注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问
请用img/背景图方式进行使用


上传图片的代码实现

 \*  目标:图片上传,显示到网页上

* 1. 获取图片文件

* 2. 使用 FormData 携带图片文件

* 3. 提交到服务器,获取图片url网址使用文章来源地址https://www.toymoban.com/news/detail-634055.html


    // 1.获取选择文件按钮,同时注册一个变化事件
    document.querySelector('.upload').addEventListener('change', e => {
      console.log(e.target.files[0])
      // 2. 使用 FormData 构造函数 携带图片文件夹
      const imgs = new FormData()
      // 调用实例对象中 append 方法,传入图片
      imgs.append('img',e.target.files[0])
      // 3. 提交到服务器,获取图片url网址使用
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: imgs
      }).then(result => {
        console.log(result.data.data)
        const imgUrl = result.data.data.url
        document.querySelector('.my-img').src = imgUrl
      })
    })

网站背景更换

  • 目标:网站-更换背景
    1. 选择图片上传,设置body背景
    1. 上传成功时,"保存"图片url网址
    1. 网页运行后,"获取"url网址使用

  • 在上传图片的基础上增加了存储到本地的功能需求,同时没有url返回,不执行更换背景。
//1、选择图片上传,给body设置背景图片
// 1.2 获取按钮进行上传
document.querySelector('.bg-ipt').addEventListener('change', e => {
    console.log(e.target.files[0])
    // 表单事件对象
    const fd = new FormData()
    fd.append('img' , e.target.files[0])
    axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
    }).then(result => {
        const res = result.data.data.url
        // 更换body的背景图
        document.body.style.backgroundImage = `url(${res})`

        // 2、上传成功时,"保存"图片url网址 到本地,防止刷新丢失
        localStorage.setItem('bgImg',res)
    })
})

// 3. 网页运行后,"获取"url网址使用
const bgUrl = localStorage.getItem('bgImg')
console.log(bgUrl)
// 逻辑与中断,本地有服务器提交后的url的话,那么就执行后面的,否则为空值不执行
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)

到了这里,关于(前后端交互式)Ajax上传图片 + 更换背景图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 交互式shell

    交互式模式就是shell等待用户的输入,并且执行用户提交的命令。这种模式被称作交互式是因为shell与用户进行交互。这种模式也是大多数用户非常熟悉的:登录、执行一些命令、签退。当用户签退后,shell也终止了。 shell也可以运行在另外一种模式:非交互式模式。在这种模

    2024年02月02日
    浏览(50)
  • Pyspark交互式编程

    Pyspark交互式编程 有该数据集Data01.txt 该数据集包含了某大学计算机系的成绩,数据格式如下所示: 根据给定的数据集,在pyspark中通过编程来完成以下内容: 该系总共有多少学生; (提前启动好pyspark) 该系共开设了多少门课程; Tom同学的总成绩平均分是多少; 求每名同学的

    2023年04月08日
    浏览(49)
  • 构建一个动态交互式图表

    在Web开发中,JavaScript不仅是实现交互效果的关键,还可以用于构建复杂的可视化组件,如动态交互式图表。在本篇博客中,我将演示如何使用JavaScript和HTML5的Canvas元素来创建一个简单的动态条形图。 HTML结构  首先,我们需要一个HTML结构来容纳我们的图表。 JavaScript实现 接下

    2024年02月20日
    浏览(55)
  • 【非交互式零知识证明】(下)

    继续上一节的内容,我们首先再回顾一下经典交互式零知识证明。 交互式零知识证明的一般模型如下: (1)证明者和验证者共享一个公共输入,证明者可能拥有某个秘密输入; (2)如果验证者认可证明者的响应,则输出Accept,否则输出Reject。 经典交互式零知识证明除了应

    2024年02月04日
    浏览(47)
  • Matlab交互式的局部放大图

    在数据可视化中,很多时候需要对某一区间的数据进行局部放大,以获得对比度更高的可视化效果。下面利用 MATLAB 语言实现一个交互式的局部放大图绘制。 源码自行下载: 链接:https://pan.baidu.com/s/1yItVSinh6vU4ImlbZW6Deg?pwd=9dyl 提取码:9dyl 使用方法 : 1.将 BaseZoom.m 和 parameters

    2024年01月16日
    浏览(52)
  • Android2:构建交互式应用

    一。创建项目 项目名 Beer Adviser 二。更新布局 activity_main.xml 三。增加资源 strings.xml 四。响应点击 MainActivity.kt 知识点:

    2024年02月12日
    浏览(59)
  • 使用 htmx 构建交互式 Web 应用

    学习目标:了解htmx的基本概念、特点和用法,并能够运用htmx来创建交互式的Web应用程序。 学习内容: 1. 什么是htmx?    - htmx是一种用于构建交互式Web应用程序的JavaScript库。    - 它通过将HTML扩展为一种声明性的交互式语言,使得开发人员可以使用简单的HTML标记来实现动态

    2024年02月10日
    浏览(55)
  • OpenCV构建交互式图像距离测量工具

    在计算机视觉和图形学应用中,准确测量图像上的点之间距离是一项常见且重要的任务。本篇技术博客将详细介绍如何利用Python编程语言和OpenCV库构建一个交互式的图像距离测量工具。我们将通过编写一个名为ImageProcessor的类,让用户能够在图像上点击选取点,并实时显示两

    2024年04月14日
    浏览(48)
  • Dash,方便创建「交互式」Web图表!

    你好,我是郭震 这篇文章,探讨 Dash —— 一个由 Plotly 开发的优秀 Python 框架,专为构建丰富的网络分析应用而设计。 推荐使用这个Python工具包! Dash 使得数据分析师能够使用 Python 创建互动式的 web 应用,而无需深入了解复杂的前端技术如 HTML 或 JavaScript。 要开始使用 Das

    2024年02月22日
    浏览(64)
  • 【shell】交互式自动化执行命令

    sftp 登陆并传输文件时需要手动输入密码 通过 expect 脚本模拟用户输入来与命令交互, 根据命令的输出提示, 来执行相应的操作, 来实现自动化 expect 给变量赋值用 set 变量名 \\\"变量值\\\" 获取今天 : set today [clock format [clock seconds] -format %Y-%m-%d] 获取昨天 : set yesterday [clock format [expr

    2024年02月09日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包