有趣且重要的JS知识合集（19）前端实现图片的本地上传/截取/导出

已于 2024-02-23 17:31:17 修改
阅读量579 收藏 8
点赞数 6
分类专栏： js有趣知识 文章标签： 前端 javascript 开发语言
于 2024-02-23 17:14:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39404437/article/details/136260242
版权

input[file]太丑了，又不想去改button样式，那就自己实现一个上传按钮的div，然后点击此按钮时，去触发file上传的事件, 以下就是 原生js实现图片前端上传 并且按照最佳宽高比例展示图片，然后可以自定义截取图片，右侧预览区域 可以看到截图，最后还可以导出图片

1、效果图：

左侧为编辑区域，右侧为预览区域

2、文件目录 

3、实现源码： 

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>image-cut</title>
  <link rel="stylesheet" href="./assets/reset.css" />
  <link rel="stylesheet" href="./assets/main.css" />
  <link rel="stylesheet" href="./assets/rect.css" />
</head>
<!-- 图片裁剪 -->
<body>
  <div id="root">
    <div id="tool" class="tool">
      <span id="insert-img" title="插入你想要截图的图片">插入图片</span>
      <span id="start-paint" title="绘制矩形框并在右侧展示区生成canvas">开始截图</span>
      <span id="clear" title="清除矩形框并清除右侧截图">清除截图</span>
      <span id="export-clip" title="将右侧截图下载到本地">导出截图</span>
    </div>
    <div class="container">
      <div id="control" class="area">
        <div id="rect" class="rect">
          <span class="left-top dot"></span>
          <span class="middle-top dot"></span>
          <span class="right-top dot"></span>
          <span class="right-middle dot"></span>
          <span class="right-bottom dot"></span>
          <span class="middle-bottom dot"></span>
          <span class="left-bottom dot"></span>
          <span class="left-middle dot"></span>
        </div>
        <div class="img-box">
          <img />
        </div>
      </div>
      <div id="display" class="area display">
        <canvas></canvas>
      </div>
    </div>
  </div>
  <!-- 矩形框脚本 -->
  <script type="module" src="./srcipt/rect.js"></script>
  <!-- 主控制区脚本 -->
  <script type="module" src="./srcipt/main.js"></script>
</body>
</html>

2、/script/rect.js

import {
  methods
} from './main.js'

const dom = document.querySelector('#control')
const rect  = document.querySelector('#rect')
const origin = dom.getBoundingClientRect()
const parentBorder = Number(getComputedStyle(dom, null).borderWidth.split('px')[0]) // 父元素边框 如果你明确知道边框宽度，就不需要这行，直接赋值就行
const childBorder = Number(getComputedStyle(rect, null).borderWidth.split('px')[0]) // 子元素边框 如果你明确知道边框宽度，就不需要这行，直接赋值就行
let finallPoint
/**
 * 开始绘制
 */
const startMouse = () => {
  dom.style.cursor = 'crosshair'
  dom.onmousedown = e => {
    if (e.target !== dom) return
    const left = e.offsetX
    const top = e.offsetY
    rect.style.left = left + 'px'
    rect.style.top = top + 'px'
    rect.style.borderColor = getCurrentColor() // 绘制时使用选择的框的颜色
    const childs = rect.children
    for (let i = 0; i < childs.length; i++) {
      childs[i].style.borderColor = getCurrentColor() // 绘制时使用选择的框的颜色
    }
    dom.onmousemove = e => {
      // 宽高边界限制
      const widthArea = e.clientX - origin.x > dom.offsetWidth - (parentBorder * 2) ? dom.offsetWidth - (parentBorder * 2) : e.clientX - origin.x
      const heightArea = e.clientY - origin.y > dom.offsetHeight - (parentBorder * 2) ? dom.offsetHeight - (parentBorder * 2) : e.clientY - origin.y
      rect.style.width = widthArea - left + 'px'
      rect.style.height = heightArea - top + 'px'
    }
    dom.onmouseup = e => {
      generatePoint()
      dom.onmousedown = null
      dom.onmousemove = null
      dom.onmouseup = null
      dom.style.cursor = ''
      editMouse()
    }
  }
}
const editMouse = () => {
  rect.onmousedown = e => {
    if (e.target !== rect && e.target.className.indexOf('dot') === -1) return // 类名中包含被放行的dot除外
    const flag = mousedownHandle(e)
    let left = e.clientX
    let top = e.clientY
    const width = rect.offsetWidth
    const height = rect.offsetHeight
    const [dragX, dragY] = flag
    // 拖动
    if (dragX === -1 && dragY === -1) {
      left -= rect.offsetLeft // 要保持之前矩形框的坐标值
      top -= rect.offsetTop
    }
    const child = e.target.getBoundingClientRect()
    document.onmousemove = e => {
      // 取消浏览器因回流导致的默认事件及冒泡事件
      e.preventDefault()
      if (e.stopPropagation) {
        e.stopPropagation()
      } else {
        e.cancelable = true
      }
      finallPoint = {
        left: 0,
        top: 0,
        width: 0,
        height: 0
      }
      if (dragX === -1 && dragY === -1) {
        rect.style.cursor = 'move'
        const rightArea = dom.offsetWidth - rect.offsetWidth // 右边界
        const bottomArea = dom.offsetHeight - rect.offsetHeight // 下边界
        const leftArea = 0 // 左边界
        const topArea = 0 // 上边界
        finallPoint.left = e.clientX - left > rightArea ? rightArea : (e.clientX - left< leftArea ? leftArea : e.clientX - left)
        finallPoint.top = e.clientY - top > bottomArea ? bottomArea : (e.clientY - top < topArea ? topArea : e.clientY - top)
        rect.style.left = finallPoint.left + 'px'
        rect.style.top = finallPoint.top + 'px'
      } else if (dragX === 0 && dragY === 0) { // 左上角拉伸
        finallPoint.left = e.clientX > origin.x ? ((e.clientX > (left + width)) ? left + width - origin.x : e.clientX - origin.x) : 0
        finallPoint.top = e.clientY > origin.y ? ((e.clientY > (top + height)) ? top + height - origin.y : e.clientY - origin.y) : 0
        finallPoint.width = e.clientX > origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - origin.x)
        finallPoint.height = e.clientY > origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - origin.y)
        rect.style.left = finallPoint.left + 'px'
        rect.style.top = finallPoint.top + 'px'
        rect.style.width = finallPoint.width + 'px'
        rect.style.height = finallPoint.height + 'px'
      } else if (dragX === 1 && dragY === 0) { // 中上拉伸
        finallPoint.top = e.clientY > origin.y ? ((e.clientY > (top + height)) ? top + height - origin.y : e.clientY - origin.y) : 0
        finallPoint.height = e.clientY > origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - origin.y)
        rect.style.top = finallPoint.top + 'px'
        rect.style.height = finallPoint.height + 'px'
      } else if (dragX === 2 && dragY === 0) { // 右上角拉伸
        finallPoint.top = e.clientY > origin.y ? ((e.clientY > (top + height)) ? top + height - origin.y : e.clientY - origin.y) : 0
        finallPoint.width = (e.clientX - left + width > dom.offsetWidth - rect.offsetLeft - (parentBorder * 2) ? dom.offsetWidth - rect.offsetLeft - (parentBorder * 2) : e.clientX - left + width)
        finallPoint.height = e.clientY > origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - origin.y)
        rect.style.top = finallPoint.top + 'px'
        rect.style.width = finallPoint.width + 'px'
        rect.style.height = finallPoint.height + 'px'
      } else if (dragX === 2 && dragY === 1) { // 右中拉伸
        finallPoint.width = (e.clientX - left + width > dom.offsetWidth - rect.offsetLeft - (parentBorder * 2) ? dom.offsetWidth - rect.offsetLeft - (parentBorder * 2) : e.clientX - left + width)
        rect.style.width = finallPoint.width + 'px'
      }else if (dragX === 2 && dragY === 2) { // 右下角拉伸
        finallPoint.width = (e.clientX - left + width > dom.offsetWidth - rect.offsetLeft - (parentBorder * 2) ? dom.offsetWidth - rect.offsetLeft - (parentBorder * 2) : e.clientX - left + width)
        finallPoint.height = (e.clientY- top + height > dom.offsetHeight - rect.offsetTop - (parentBorder * 2) ? dom.offsetHeight - rect.offsetTop - (parentBorder * 2) : e.clientY- top + height)
        rect.style.width = finallPoint.width + 'px'
        rect.style.height = finallPoint.height + 'px'
      } else if (dragX === 1 && dragY === 2) { // 中下拉伸
        finallPoint.height = (e.clientY- top + height > dom.offsetHeight - rect.offsetTop - (parentBorder * 2) ? dom.offsetHeight - rect.offsetTop - (parentBorder * 2) : e.clientY- top + height)
        rect.style.height = finallPoint.height + 'px'
      } else if (dragX === 0 && dragY === 2) { // 左下角拉伸
        finallPoint.left = e.clientX > origin.x ? ((e.clientX > (left + width)) ? left + width - origin.x : e.clientX - origin.x) : 0
        finallPoint.width = e.clientX > origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - origin.x)
        finallPoint.height = (e.clientY- top + height > dom.offsetHeight - rect.offsetTop - (parentBorder * 2) ? dom.offsetHeight - rect.offsetTop - (parentBorder * 2) : e.clientY- top + height)
        rect.style.left = finallPoint.left + 'px'
        rect.style.width = finallPoint.width + 'px'
        rect.style.height = finallPoint.height + 'px'
      } else if (dragX === 0 && dragY === 1) { // 左中拉伸
        finallPoint.left = e.clientX > origin.x ? ((e.clientX > (left + width)) ? left + width - origin.x : e.clientX - origin.x) : 0
        finallPoint.width = e.clientX > origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - origin.x)
        rect.style.left = finallPoint.left + 'px'
        rect.style.width = finallPoint.width + 'px'
      }
      generatePoint()
    }
    document.onmouseup = e => {
      document.onmousemove = null
      document.onmouseup = null
      rect.style.cursor = 'move'
    }
  }
}
/**
 * mousedown逻辑处理
 */
const mousedownHandle = (e) => {
  let flag = 0 // 点击的是除边角以外的其他部分 拖动
  let startX = e.offsetX
  let startY = e.offsetY
  let width = e.target.offsetWidth
  let height = e.target.offsetHeight
  if (e.target !== rect) {
    flag = 1 // 点击的是边角 缩放
    const parent = e.target.offsetParent.getBoundingClientRect()
    const child = e.target.getBoundingClientRect()
    startX = child.x - parent.x
    startY = child.y - parent.y
    width = e.target.offsetParent.offsetWidth
    height = e.target.offsetParent.offsetHeight
  }
  const difference = 12 // 点击四边角12 px范围为拉伸，其他为拖动,这个值可以根据你需要的来调整
  let left = 0 // 0 => left, 1 => middle, 2 => right, -1 => 点击的位置不能被拖动
  let top = 0 // 0 => top, 1 => middle, 2 => bottom, -1 => 点击的位置不能被拖动
  if (startX < difference) { // 点击的位置为矩形左侧
    left = 0
  } else if (startX > width / 2 - difference && startX < width / 2 + difference) { // 点击的位置为矩形中间 width/2 - 6px ~ width/2 + 6px
    left = 1
  } else if (startX < width && startX > width - difference){ // 点击的位置为矩形右侧 width - 6px ~ width
    left = 2
  } else {
    left = -1
  }

  if (startY < difference) { // 点击的位置为矩形上侧
    top = 0
  } else if (startY > height / 2 - difference && startY < height / 2 + difference) { // 点击的位置为矩形中间 height/2 - 6px ~ height/2 + 6px
    top = 1
  } else if (startY < height && startY > height - difference){ // 点击的位置为矩形下侧 height - 6px ~ height
    top = 2
  } else {
    top = -1
  }
  if (left === -1 || top === -1 || (left === 1 && top === 1)) {
    return [-1, -1]
  }
  return [left, top] // 只会有八个位置能被准确返回，其余都是返回[-1, -1]
}

const clear = document.querySelector('#clear') // 清除截图
const startPaint = document.querySelector('#start-paint') // 开始绘制

const getCurrentColor = () => {
  return '#fa9120'
}
/** 生成最终坐标 */
const generatePoint = () => {
  const rectArgs = {
    left: parseInt(getComputedStyle(rect).left),
    top: parseInt(getComputedStyle(rect).top),
    width: parseInt(getComputedStyle(rect).width),
    height: parseInt(getComputedStyle(rect).height),
  }
  methods.generateImg(rectArgs)
}
/** 清除矩形框 */
export const clearRect = () => {
  rect.style.left = '-9999px'
  rect.style.top = 0
  rect.style.width = 0
  rect.style.height = 0
}

clear.onclick = e => {
  methods.clearCanvas()
  clearRect()
}
startPaint.onclick = e => {
  startMouse()
}

3、/script/main.js

import {
  clearRect
} from './rect.js';

// 编辑区dom
const control = document.querySelector('#control')
// 编辑区显示的图片dom
const controlImg = document.querySelector('#control img')
// 预览区dom
const display = document.querySelector('#display')
// 预览区显示的canvas dom
const canvas = document.querySelector('#display canvas')
const ctx = canvas.getContext('2d')
// 插入图片的dom
const insertImg = document.querySelector('#insert-img')
// 导出截图的dom
const exportClip = document.querySelector('#export-clip')
// 图片对象
let imgObj = null
// 最佳显示比例
let bestScale = 0
const methods = {
  /** ------ 图片上传模块 开始 ------ */
  doInput() {
    const inputObj = document.createElement('input');
    inputObj.addEventListener('change', this.readFile, false);
    inputObj.type = 'file';
    inputObj.accept = 'image/*';
    inputObj.click();
  },
  readFile() {
    const file = this.files[0]; // 获取input输入的图片
    if(!/image\/\w+/.test(file.type)){
        alert("请确保文件为图像类型");
        return false;
    } // 判断是否图片
    const reader = new FileReader();
    reader.readAsDataURL(file); // 转化成base64数据类型
    reader.onload = function(e){
      methods.drawToCanvas(this.result); // lve为当前实例
    }
  },
  drawToCanvas(imgData) {
    imgObj = new Image()
    controlImg.src = imgObj.src = imgData
    imgObj.onload = () => {
      bestScale = methods.calcBestScale(imgObj, control.offsetWidth, control.offsetHeight)
      // 图片按最佳比例展示
      controlImg.width = imgObj.width * bestScale
      controlImg.height = imgObj.height * bestScale
      // 外部盒子也按照最佳比例展示
      control.style.width = controlImg.width + 'px'
      control.style.height = controlImg.height + 'px'
    }
  },
  /** ------ 图片上传模块 结束 ------ */
  /**
   * 随机id
   */
  uuid() {
    let d = new Date().getTime();
    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      const r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid
  },
  /**
   * canvas转base64
   * @param {*} blob
   * @param {*} type
   * @param {*} name
   */
  blob2file(blob, type = 'png', name = '') {
    const fileName = name || this.uuid() + '.' + type
    const file = new File([blob], fileName, { type: blob.type, lastModified: Date.now() })
    return file
  },
  /**
   * 计算最佳的图片显示比例
   * @param {*} img
   * @param {*} deviceWidth
   * @param {*} deviceHeight
   * @returns 
   */
  calcBestScale(img, deviceWidth, deviceHeight) {
    return Math.min(deviceWidth / img.width, deviceHeight / img.height)
  },
  /**
   * 清除canvas
   */
  clearCanvas() {
    canvas && ctx.clearRect(0, 0, display.offsetWidth, display.offsetHeight)
  },
  /**
   * 生成图片
   * @param {*} src 
   */
  generateImg(rect) {
    if (!imgObj) return
    const {
      left,
      top,
      width,
      height
    } = rect
    const displayRect = {
      left: left / bestScale,
      top: top / bestScale,
      width: width / bestScale,
      height: height / bestScale
    }
    // 当截图矩形框宽度大于高度时，以预览区宽度为限制，高度按比例缩放
    if (displayRect.width >  displayRect.height) {
      canvas.width = display.offsetWidth
      canvas.height = display.offsetWidth * displayRect.height / displayRect.width
    // 当截图矩形框高度大于宽度时，以预览区高度为限制，宽度按比例缩放
    } else {
      canvas.height = display.offsetHeight
      canvas.width = display.offsetHeight * displayRect.width / displayRect.height
    }
    ctx.drawImage(imgObj, displayRect.left, displayRect.top, displayRect.width, displayRect.height, 0, 0, canvas.width, canvas.height)
  }
}
/** 点击插入图片触发逻辑 */
insertImg.addEventListener('click', () => {
  clearRect()
  methods.doInput()
})

/** 点击导出截图触发逻辑 */
exportClip.addEventListener('click', () => {
  if (canvas) {
    // 创建一个 a 标签，并设置 href 和 download 属性
    const el = document.createElement('a');
    // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
    el.href = canvas.toDataURL('image/png', 1.0);
    el.download = '截图.png';
    // 创建一个点击事件并对 a 标签进行触发
    const event = new MouseEvent('click');
    el.dispatchEvent(event);
  }
})

export {
  methods
}

4、/assets/rect.css

.rect{
  position: absolute;
  /* box-shadow: 0 0 0 1999px rgba(0, 0, 0, .4); */
  left: -9999px;
  top: 0;
  width: 0;
  height: 0;
  border: 1px solid #d79751;
  cursor: move;
  z-index: 1;
}
.rect > span{
  position: absolute;
  width: 4px;
  height: 4px;
  /* border-radius: 50%; */
  border: 1px solid #fa9120;
  background-color: #fa9120;
}
.rect .left-top{
  left: -3px;
  top: -3px;
  cursor: nwse-resize;
}
.rect .middle-top{
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  cursor: n-resize;
}
.rect .right-top{
  right: -3px;
  top: -3px;
  cursor: nesw-resize;
}
.rect .right-middle{
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  cursor: e-resize;
}
.rect .right-bottom{
  right: -3px;
  bottom: -3px;
  cursor: nwse-resize;
}
.rect .middle-bottom{
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  cursor: s-resize;
}
.rect .left-bottom{
  left: -3px;
  bottom: -3px;
  cursor: nesw-resize;
}
.rect .left-middle{
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  cursor: w-resize;
}

5、/assets/main.css

body {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#root {
  width: 80%;
  height: 624px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tool {
  padding: 0 10px;
  line-height: 24px;
  height: 24px;
  width: 100%;
}

.tool span {
  cursor: pointer;
}

.tool span:hover {
  color: #fa9120;
}

.container {
  width: 100%;
  height: calc(100% - 24px);
  position: relative;
  display: flex;
}

.area {
  width: 50%;
  max-width: 50%;
  height: 100%;
  border: 2px dashed #eee;
  border-radius: 8px;
  position: relative;
}

.area .img-box {
  position: absolute;
  left: 0;
  height: 0;
  z-index: -1;
  pointer-events: none;
}

.area img {
  pointer-events: none;
}

#control canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

6、/assets/reset.css(初始化样式表，这个可以你自行实现)

* {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}

body,
button,
input,
select,
textarea {
    font: 12px/1.5tahoma, arial, \5b8b\4f53;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

address,
cite,
dfn,
em,
var {
    font-style: normal;
}

code,
kbd,
pre,
samp {
    font-family: couriernew, courier, monospace;
}

small {
    font-size: 12px;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

legend {
    color: #000;
}

fieldset,
img {
    border: 0;
}

button,
input,
select,
textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

林大大哟
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS读取本地文件夹和图片异步加载（图片LazyLoad）
04-13
NULL 博文链接：https://angrycoder.iteye.com/blog/1711155
Android实现从本地图库/相机拍照后裁剪图片并设置头像
01-21
上述过程已经实现好了，最后一步我加上了把截取好的图片在保存到本地的操作，来保存头像。为了大家需要，下面软件开发网小编把完整的代码贴出来供大家参考。 先给大家展示效果图： 代码部分： 布局代码（其实...
前端如何实现本地图片上传？
qq_47828130的博客
02-22 3151
前端实现本地图片上传
js上传图片本地预览（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-13 549
<!doctype html> <html> <head> <meta charset="utf-8"> <title>html 上传图片本地预览</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> .file_scan { text-align:center;
本地上传图片（js+html）
weixin_47000135的博客
07-23 346
<div> <span class="text">添加图片到右边div</span> <div class="upload"> <input type="file" id="upload" onchange="upload()" accept="image/jpg,image/jpeg,image/png,image/PNG"> </div> </div>...
js文件上传图片并支持本地预览
qq_41812656的博客
12-29 505
js实现上传图片支持本地预览
基于python 实现的可以用于游戏截取数字图片的识别的AI模型. 带模型不用自己训练
最新发布
06-05
【作品名称】：基于python 实现的可以用于游戏截取数字图片的识别的AI模型. 带模型不用自己训练。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或...
C#图片截取压缩(百分比压缩/大小压缩)实现代码
10-27
在C#编程中，处理图像是一项常见的任务，其中包括图片截取和压缩。本文将介绍如何使用C#实现图片的百分比压缩和指定大小压缩，帮助你理解和应用这些技术。 首先，我们来看百分比压缩。百分比压缩是根据给定的百分比...
jquery实现图片截取+放大预览功能
05-18
摘要:脚本资源,jQuery,图片裁剪　jQuery实现图片截取+放大预览功能的插件实例，如上图所示，在图中任意位置按住鼠标左键拖动出一个区域，下方立刻会出现所选择区域的放大图，实现了完美的图片选区和放大预览功能。...
python实现从本地摄像头和网络摄像头截取图片功能
09-19
主要介绍了python实现从本地摄像头和网络摄像头截取图片功能 ,文中给大家提到了python , opencv 打开网络摄像头读取图像的实现代码，需要的朋友可以参考下
html5+js本地图片预览
06-23
在上传图片时，经常需要预览图片。 本用例使用html5+js实现上传图片的本地预览。鼠标移至预览图片可以显示大图。
js读取本地图片进行预览，上传服务器
08-08
上传图片的project 博文链接：https://alisdame.iteye.com/blog/2163940
使用js显示本地图片
yinbucheng的博客
08-17 3767
如梦技术IT-图片上传预览           "> //图片预览，兼容各个浏览器 function previewImage(file) {    var porImg  = $(file),        viewImg = $('#viewImg');    var image = porImg.val();    if (!
JS 本地图片预览
White feathe 的博客
07-06 625
JS 本地图片预览效果附上： 代码附上：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传本地预览</title> <style type="text/css"> #preview {width: 260px;height: 190px;bor
js 本地图片的使用方式
jjw_zyfx的博客
10-20 931
比如img 中的src属性的使用一般不要直接 src="../../assets/img/swiper/1920_1080_0.jpg"而是通过 import xxx from xxx这种方式导入 或者通过require的方式导入
前端vue点击图片上传(带封装方法)
m0_49714202的博客
09-08 962
前端vue点击图片上传(带封装方法)
图片上传下载——保存到本地or保存到云服务器
m0_59555392的博客
11-06 2854
详细介绍了图片上传下载业务功能涉及到的常见问题，文件保存到本地与保存到云服务器的代码实现。
原生js实现图片文件上传
龙骑士-黎明的博客
09-23 1420
图片上传、原生js
简单实现原生图片上传
m0_74060440的博客
11-14 247
【代码】简单实现原生图片上传。
JavaScript按/截取字符串
06-01
可以使用JavaScript中的字符串方法`split()`和`slice()`来实现按/截取字符串的操作，具体方法如下： 1. 按指定字符分割字符串 ```javascript let str = "hello/world"; let arr = str.split('/'); // 将字符串按照...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值