js实现本地上传图片及预览

【代码】js实现本地上传图片及预览。

雪梅零落

3642人浏览 · 2022-08-23 15:06:24

雪梅零落 · 2022-08-23 15:06:24 发布

一、概述

在JavaScript中实现本地上传图片并预览的功能需要涉及HTML、CSS和JavaScript的配合。首先，你需要在HTML中创建一个文件输入元素和一个用于显示预览的容器，css为了使图片预览更加美观，你可能需要添加一些CSS样式。例如，你可以设置容器的大小，并使图片居中显示。在JavaScript中，你需要监听文件输入元素的change事件，以便在用户选择文件后进行预览。然后，你可以使用FileReader的readAsDataURL方法读取文件内容，并将其显示在预览容器中。

二、代码

html

<!-- 上传按钮 -->
<div class="cut-cert-btn">
  <div class="cut-cert-btn-content">选择文件</div>
  <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp" id="cert_file" />
</div>
<!-- 图片预览 -->
<img src="" id='cert_view' />

js

// 按钮元素
var file = document.getElementById('cert_file');
// 图片预览元素
var image = document.querySelector("cert_view");
// 事件
file.onchange = function() {
  // 上传的文件 
  var fileData = this.files[0];           
  // 预览
  image.src = window.URL.createObjectURL(docObj.files[0]);
}

css

.cut-cert-btn {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  .cut-cert-btn-content {
    width: 68px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 500;
  }
  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 68px;
    height: 32px;
    opacity: 0;
    cursor: pointer;
  }
}

三、后记

JavaScript是一种面向对象的动态编程语言，用于为网页添加交互和动态效果。它可嵌入到HTML文档中，并通过浏览器解释执行。

以下是JavaScript的一些详细概念：

变量：JavaScript中的变量用于存储数据。变量可以通过关键字var来声明，并且可以存储各种类型的数据，如数字、字符串、布尔值等。
数据类型：JavaScript支持多种数据类型，包括数字(Number)、字符串(String)、布尔(Boolean)、对象(Object)、数组(Array)等。
运算符：JavaScript支持各种运算符，如算术运算符(+、-、*、/等)、比较运算符(==、!=、>、<等)、逻辑运算符(&&、||、!等)等。
控制流程：JavaScript中的控制流程语句包括条件语句(if、else if、else)、循环语句(for、while)和跳转语句(continue、break)等，用于控制程序的执行流程。
函数：JavaScript中的函数是一段可重复使用的代码块，用于封装一些特定的功能。函数可以有参数和返回值，可以通过关键字function来定义。
事件：JavaScript可以通过事件来响应用户的操作，如点击按钮、鼠标移动等。可以使用addEventListener()函数来为元素绑定事件，并在事件触发时执行相应的代码。
DOM操作：JavaScript可以通过DOM(Document Object Model)来操作网页的元素。可以通过getElementById()、getElementsByClassName()等方法来获取元素，并对其进行操作或修改。
AJAX：JavaScript可以使用AJAX技术与服务器进行异步通信，实现无需刷新页面的数据交互。可以使用XMLHttpRequest对象或fetch函数来发送请求，并在获取到响应后处理数据。