Js实现input上传图片并显示缩略图

最新推荐文章于 2023-04-20 11:10:25 发布
最新推荐文章于 2023-04-20 11:10:25 发布
阅读量636 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43287934/article/details/102737026
版权 
function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
前端小李
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 实现点击缩略图显示大图
weixin_30325071的博客
04-10 777
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> ...
Js上传图片并生成缩略图
weixin_30470857的博客
02-16 760
Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是ajaxfileupload,下载地址：http://files.cnblogs.com/files/yujie365/ajaxfileupload.js，Html布局采用bootstrap. 后端处理流...
原生js略缩图实现
weixin_52026870的博客
02-19 574
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div, div img { width: 500px; height: 400px; } div.me
JS获取图片的缩略图
weixin_30906671的博客
04-27 748
js获取上传文件的缩略图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Demo - AngularJS version</title> <meta name="viewport" c...
【JS】web端实现图片生成缩略图，纯js函数实现
飘逸者打瞌睡
04-20 2161
主要函数generateThumbnails，传入一个File对象，生成的缩略图返回一个base64.web端实现图片生成缩略图，纯js函数实现。
图片上传即时显示缩略图的js代码
10-29
总结一下，这个JavaScript代码实现了一个简单的图片上传预览功能，通过创建一个`Picture`类来处理文件对象，然后在`<img>`元素上显示缩略图。它考虑了不同浏览器之间的兼容性问题，同时提供了扩展名的验证。为了在...
js实现上传按钮并显示缩略图小轮子
11-20
在本文中，我们将探讨如何使用JavaScript（JS）来创建一个自定义的上传按钮，并在用户选择图片后实时显示缩略图。默认的HTML文件输入控件样式通常不符合设计师的审美需求，因此，我们通过编写自定义的JS代码来解决这...
基于Springmvc的上传图片并生成缩略图
10-26
在本文中，我们将深入探讨如何基于Springmvc实现图片上传及生成缩略图的功能。Springmvc是Spring框架的一个重要模块，用于构建MVC模式的Web应用，它提供了强大的数据绑定、模型映射、视图渲染等功能，是Java开发中的...
基于VUE选择上传图片并页面显示（图片可删除）
08-30
该效果通过VUE框架实现图片上传和显示，并提供了删除图片的功能。下面我们将对该资源的知识点进行详细介绍。 1. VUE选择上传图片 在该资源中，我们使用VUE框架来实现图片上传的功能。首先，我们需要在模板中添加一...
原生 js 实现上传图片展示缩略图的两种方式
sunny_lss的博客
09-26 676
方式1reader.readAsDataURL() 方式2window.url() 具体实现 <input type="file" onchange="chooseImg(event)"> <div class="imgBox"></div> function chooseImg(e) { // single upload ...
input上传图片并且实现预览
weixin_45757134的博客
06-11 6555
文章目录前言一、确定思路二、书写代码1.HTML部分2.CSS部分3.JS部分（重点）3.1.点击选择图片按钮，调用input文件框事件的的代码3.2.转换格式3.3.发送图片给后端 前言 在网站中，上传图片这个功能，这个还是挺常见的。比如说：在填写信息中，上传头像中。 提示：以下是本篇文章正文内容，下面案例可供参考 一、确定思路 整个功能，大致可以分为三个步骤。 点击选择图片的按钮，从本地选择一张图片。（选图片） 选择好之后，会进行预览。就好比自己微信要换头像，选择好之后，都会有预览的步骤。（预
js 实现前端图片上传，展示缩略图功能
AdleyTales的技术博客
11-15 2万+
原理：很简单，就是监听input file表单的onchange事件。 注意：方法在ie浏览器可以实现，但是在高级浏览器非IE，就会有fakepath，图片路径加密的问题，导致显示不出上传的图片。 解决方案：引入 FileReaderFileReader API 地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReade
JQuery实现input上传图片显示缩略图
Yiu的博客
12-08 7322
首先 HTML ：&lt;div&gt; &lt;input type="file" name="file" class="form-control" id="zx_img" style="padding: 0px;" placeholder="&amp;nbsp;上传文件"&gt; &lt;div&gt;
使用input file 上传图片并显示
热门推荐
山外小楼
11-21 2万+
使用input file 上传图片并显示
JS实现input上传图片时显示缩略图
轻风细雨_林木木
03-27 552
注意：以下代码只适用于chrome、Firefox和IE10以上 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Js实现input上传图片时显示缩略图</title> </head> <input type="file" id="im...
js实现上传文件实时显示缩略图
weixin_34007879的博客
04-17 746
<input name="coverImage" onClick="" onchange="setImagePreview(this);" type="file" style="text-align:center;float: left;" placeholder="只能选取 jpg、jif、bmp格式 " /> <div id="localImag" style...
【前端解决方案】input file 上传图片，并实现实时预览
Yuu
11-12 8048
前言 我最近在做自己个人博客的时候，遇到一个前端的问题，就是如何实时预览 input 标签上传的图片。一般的 &lt;input type="file’ /&gt; 标签是不能实现实时预览的。 解决方案 可以通过 file 标签和 js 的 FileReader 接口来实现。 把选择的图片文件调用 readAsDataURL 方法 把图片数据转成 base64 字符串形式显示在页面上 htm...
js生成缩略图后并上传
最新发布
06-08
好的，生成缩略图并上传需要以下几个步骤： 1. 使用 JavaScript 生成缩略图，可以使用第三方库如`canvas`或`FileReader`来实现。 2. 将生成的缩略图转换为`Blob`对象。 3. 使用`FormData`对象将`Blob`对象上传到服务器，可以使用XMLHttpRequest或fetch进行上传。 下面是一个简单的示例代码： ```javascript // 生成缩略图 function createThumbnail(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function() { const image = new Image(); image.src = reader.result; image.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; ctx.drawImage(image, 0, 0, 100, 100); canvas.toBlob(resolve, 'image/jpeg', 0.9); }; }; reader.readAsDataURL(file); }); } // 上传缩略图 function uploadThumbnail(blob) { const formData = new FormData(); formData.append('thumbnail', blob, 'thumbnail.jpg'); fetch('/upload', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); } // 处理文件上传事件 function handleFileUpload(event) { const file = event.target.files[0]; createThumbnail(file) .then(uploadThumbnail) .catch(error => console.error(error)); } // 监听文件上传事件 const fileInput = document.querySelector('#file-input'); fileInput.addEventListener('change', handleFileUpload); ``` 在这个示例中，`createThumbnail`函数使用`FileReader`读取文件并将其转换为`Image`对象，然后使用`canvas`生成100x100的缩略图，并将缩略图转换为`Blob`对象。`uploadThumbnail`函数使用`FormData`对象将缩略图上传到服务器，上传过程使用了`fetch`进行异步处理。最后，`handleFileUpload`函数监听文件上传事件，调用`createThumbnail`和`uploadThumbnail`函数生成缩略图并上传。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值