开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js图片上传预览删除

基础概念

JavaScript 图片上传预览删除功能允许用户在网页上选择图片文件，实时预览所选图片，并在需要时删除预览的图片。这一功能通常涉及以下几个步骤：

文件选择：用户通过 <input type="file"> 元素选择图片文件。
预览生成：使用 JavaScript 读取文件并在页面上显示预览。
删除功能：提供一个按钮或方法来移除已预览的图片。

相关优势

用户体验：用户可以在上传前查看图片，确保图片符合要求。
减少错误：避免因上传错误或不合适的图片而导致的额外操作。
即时反馈：提供即时的视觉反馈，增强交互性。

类型与应用场景

单张图片上传：适用于用户只需上传一张图片的场景，如头像上传。
多张图片上传：适用于需要上传多张图片的场景，如相册上传或产品图片上传。
实时预览：在用户选择图片后立即显示预览，适用于任何需要即时反馈的场景。

示例代码

以下是一个简单的 JavaScript 图片上传预览删除功能的实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传预览删除</title>
<style>
  .preview-container {
    display: flex;
    flex-wrap: wrap;
  }
  .preview-image {
    max-width: 100px;
    max-height: 100px;
    margin: 5px;
  }
  .remove-btn {
    cursor: pointer;
    margin-left: 5px;
  }
</style>
</head>
<body>

<input type="file" id="fileInput" multiple>
<div class="preview-container" id="previewContainer"></div>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
  const files = event.target.files;
  const previewContainer = document.getElementById('previewContainer');
  previewContainer.innerHTML = ''; // Clear previous previews

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();

    reader.onload = function(e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      img.classList.add('preview-image');

      const removeBtn = document.createElement('span');
      removeBtn.textContent = 'X';
      removeBtn.classList.add('remove-btn');
      removeBtn.onclick = function() {
        previewContainer.removeChild(img.parentNode);
      };

      const container = document.createElement('div');
      container.appendChild(img);
      container.appendChild(removeBtn);
      previewContainer.appendChild(container);
    };

    reader.readAsDataURL(file);
  }
});
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：图片预览加载缓慢

原因：大尺寸图片或网络状况不佳。
解决方法：在上传前压缩图片或在服务器端进行优化处理。

问题2：浏览器兼容性问题

原因：不同浏览器对文件读取 API 的支持程度不同。
解决方法：使用 polyfill 或确保代码在主流浏览器上测试通过。

问题3：删除功能失效

原因：事件绑定错误或 DOM 结构变动未正确处理。
解决方法：检查事件绑定逻辑，确保删除按钮能正确移除对应的图片元素。

通过上述方法，可以有效实现并维护一个稳定可靠的图片上传预览删除功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

图片上传预览js

DOCTYPE html> js.../jquery.js" type="text/javascript" charset="utf-8"> ... 图片

49K9 0

js --- 上传图片预览

DOCTYPE html> 图片上传预览功能 <input id='inp' type="file" name...= -1){ imgs.src= imgSrc; }else{ alert('错误的图片格式'); } // 正确显示 function geturl(file){

34.8K1 0

js上传图片预览

28.2K0 0

js实现本地上传图片预览

在做网站系统时经常会用到图片上传功能，用户往往希望能看到自己上传的图片的样子，有的人是采用将图片上传到服务器之后再回显到页面，这种方式在无形之中增加了服务器的运行压力，因为如果用户感觉不满意还会再次上传图片...为了减轻服务器压力，我们通过js来实现本地图片上传预览功能，不经过服务器就实现预览效果。...file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"> 上面这部分代码是页面上传按钮和显示图片的区域...接下来请看js控制代码 function setImagePreview(avalue) { var docObj=document.getElementById("doc"); var imgObjPreview...imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } 这样我们就实现了本地图片上传预览功能

8.1K4 0

Nodejs实现图片的上传、压缩预览、定时删除

前言我们程序员日常都会用到图片压缩，面对这么常用的功能，肯定要尝试实现一番。...koa-router’);// 接口必备 const cors = require(‘koa2-cors’); // 跨域必备 const tinify = require(‘tinify’); // 图片压缩...app.use(koaBody({ multipart: true, formidable: { maxFileSize: 200 * 1024 * 1024 // 设置上传文件大小最大限制，默认2M...第二步，详细接口配置我们要实现图片上传以及压缩，下面我们将要实现。...1、上传图片更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119816193

1.1K3 0

Nodejs实现图片的上传、压缩预览、定时删除。

第二步，详细接口配置我们要实现图片上传以及压缩，下面我们将要实现。...1、上传图片 var new1 = ''; var new2 = ''; // 上传图片 router.post('/uploadPic', async (ctx, next) => { const..." }); 2、压缩图片以及定时删除图片 // 压缩图片 router.get('/zipimg', async (ctx, next) => { console.log(new1);...resolve(new2) } } }) }) } // 删除指定文件夹的图片..."> 压缩 //上传图片

1.5K1 0

JAVA图片批量上传JS-带预览功能

这篇文章就简单的介绍一个很好用的文件上传工具，批量带预览功能。直接贴代码吧，都有注释，很好理解。 HTML页面 js"> js/upload/zyupload-1.0.0...fileType : ["jpg","png","txt","js","exe","gif"],// 上传文件的类型 fileSize :...// 是否可以裁剪图片 del : true, // 是否可以删除文件 finishDel :...false, // 是否在上传文件完成后删除预览 /* 外部获得的回调接口 */ onSelect: function(selectFiles, allFiles){

7.2K5 0

在上传图片之前预览图片

) { readURL(this); }); js

4.8K2 0

php上传图片并预览

作者：陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主文章目录前言代码 cyg.php 2.php 效果： ---- 前言 php上传文件并预览功能.我使用的是...请现在D:\phpstudy_pro\WWW下面新建一个uploads文件夹(文件上传后就存储在uploads哪里哈) 代码 cyg.php <!...//意思是把文件放在D:\phpstudy_pro\WWW\uploads文件夹里面 $file2="uploads/".basename($_FILES['file']['name']);//图片显示必须是相对路径因为图片在

5.5K1 0

JS实现本地预览上传图片并获取宽高

我们在本地上传文件、图片是用file类型的表单，大多时候我们想让上传的图片先预览在我们本地，下面来看看代码吧。...image/png" name="file" onchange="selectImg(this)"> 我们给上传表单的标签加一个...JS部分： function selectImg(file) { if (!file.files || !...$('#showImg').attr("src", replaceSrc); }; reader.readAsDataURL(file.files[0]); } 上面就实现了上传图片是本地预览图片了...我们可以通过下面这句代码获得图片的其他信息↓ console.log(file.files); 可以从上面的截图看到，有图片的名字、大小、格式等。

8K2 0

本地单张图片上传预览

minimum-scale=1.0"> 7 8 本地单图上传预览...imgPre');"/> 21 22 23 24 /** 25 * 本地图片预览...26 */ 27 // 获取上传文件地址函数 28 function getFileUrl(sourceId) { 29 var url; 30

3.3K1 0

jQuery实现图片上传预览

5K0 0

vue上传图片并预览

: 200px;height: 200px" /> 提示：请选择本地图片上传...代码： 1.双向绑定数据 data：{ return{ imageSave:"",//图片路径 uploadDate:"",//上传时间 }...('saveImage').click() } 3.挂载预览图片 mounted(){ this.yulan();//预览图片...}, //实时显示该图片在页面预览 yulan(){ document.getElementById('saveImage').onchange...}; fr.readAsDataURL(imgFile); } } 4.上传图片

3.8K1 0

图片上传后即时预览

//设置图片上传后预览的...> //图片上传和预览

2.5K0 0

jQuery实现图片上传预览

5.6K1 0

Ajax上传图片以及上传之前先预览

在文件上传的时候用到了Ajax上传文件，以及图片在上传之前的预览效果，解决了这两个小问题，和小伙伴们分享下。 ---- 上传之前的预览方式一先来说说图片上传之前的预览问题。...} 这里对于支持FileReader的浏览器直接使用FileReader来实现，不支持FileReader的浏览器则采用微软的滤镜来实现（注意给图片上传的...文件 2.预先定义好要显示预览图片的img标签，该标签要有id。...Ajax上传图片文件 Ajax上传图片文件就简单了，没有那么多方案，核心代码如下： var formData = new FormData(); formData.append...OK，以上就是我们对Ajax上传图片以及图片预览的一个简介，有问题的小伙伴欢迎留言讨论。

1.5K8 0

HTML5上传图片预览

DOCTYPE html> HTML5上传图片预览 js"> 请选择图片文件：JPG/GIF <input type="file" name="file0" id=

4.4K5 0

如何预览要上传的图片？

（新手编程1001问-0004） Q：上传图片时，如何实现图片预览？ A：昨天我们讨论了如何借助FormData通过Ajax上传文件。...有同学留言谈到上传图片文件时，有时需要进行图片预览，这样能及时发现选择的图片文件是否正确，但是，不知道如何实现？ ## 图片上传前预览真的那么重要吗？ ?...$$ 哈哈，有些喜欢私藏图片的同学万一上传错了，那可真要出大事了！ ? ## 嗯~，看来还真是蛮重要的。 ? OK，那我们今天就来介绍一下图片上传前如何实现预览功能。...这里，我们就是使用FileReader的FileReader.readAsDataURL(File)方法来实现图片预览的。...（HTML页面选择要上传的图片文件） ? （JS中使用FileReader实现图片预览代码）

1.8K5 0

HTML5上传图片预览

DOCTYPE html> HTML5上传图片预览 js"> 请选择图片文件：JPG/GIF <input type="file" name="file0" id=

4.2K2 0

图片预览放大js插件

分享一个非常简单的图片预览插件viewer 首先引入js和css viewer.js:下载链接 jquery1.11.3.js:下载链接 jquery-viewer.min.js:下载链接 viewer.css...viewer.css" rel="external nofollow" rel="external nofollow"> js..."> js"> js"></...//缩放等级（1倍) $image.viewer('zoomTo', 1); } }); // 初始化后获取Viewer.js

61.8K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭