手写的js图片上传加载工具

忘是亡心i 2022-06-07 08:25 86阅读 0赞

1 图片上时，一般需要使用上传按钮+缩略图的形式上传文件，这样可以更好的提升用户体验

![Center][]

2 在上面图片中，用户上传时可以点击按钮图片，图片加载可以看到自己选择的缩略图，这些代码一般在网上开源的js文本编辑插件中都能实现，另外我们也可以自己编写一个类似的js程序完成该功能

![Center 1][]

3 在上面图片中，我们使用的其实仍然是html的file对象<input type="file">，只不过我们用缩略图代替了file对象

4 用手写的js代码如何完成加载并生成上传缩略图呢，我们需要用到jquery的**click()**事件代替图片按钮的点击，并且使用html5的URL对象代替按钮图片，切换成file对象所加载的图片

1 用按钮图片代替file对象

2 点击按钮图片相当于点击file对象

3 在图片加载后获得图片缓存

4 用图片缓存代替按钮图片

5 生成新的按钮

5 这里面我们需要解决的问题有两个，1获得file对象的缓存，2创建一个url代替按钮图片

// 获得blob图片缓存  
            var upload\_img = $("\#spu\_file\_"+file\_index)\[0\].files\[0\];  
              
            // 将blob转化为window的url对象  
            var url = window.URL.createObjectURL(upload\_img);  
              
            // 将url赋值给img  
            $("\#spu\_img\_"+file\_index).attr("src",url);

6 经过以上的操作我们就可以完成上传图片的加载功能了，是不是很简单

[Center]: /images/20220607/1799ad55683b4e4dbdfef84d3636595e.png
[Center 1]: /images/20220607/c79f3ba7e7b64480a484485b28e31b35.png

发表评论取消回复

表情：

评论列表（有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读

相关原生图片上传与加载

几天公司里安排了任务需要维护某项目的几个模块，其中一个模块里的功能就是图片的上传与加载，由于这个项目使用的技术和框架都相对旧一点，jdk用的是1.6版本的，有些功能像文件...

比眉伴天荒/ 2024年04月18日 12:22/ 0 赞/ 10 阅读

相关 JS 实现图片延迟加载（懒加载）

实现原理 1. 结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色） 2. 最开始，img 的 src 设置默认

客官°小女子只卖身不卖艺/ 2022年12月29日 06:43/ 0 赞/ 506 阅读

相关手写 vue loading加载组件

手写 vue loading加载组件，在要用的组件直接引入，传入: `<load :loading="loading"></load>` ![在这里插入图片描述][202

╰+攻爆jí腚メ/ 2022年12月11日 12:30/ 0 赞/ 71 阅读

相关 android加载本地图片的工具类,Android图片加载缓存工具类

代码分享-> 该类仅为了避免多次加载图片，做的一个图片加载的简单管理，适用于一些简单的需求。对于大内存的图片有OOM的风险。 \----------------------

红太狼/ 2022年10月16日 04:44/ 0 赞/ 176 阅读

相关面试官刁难系列一：手写图片懒加载代码

前言今天是跟面试官开撕的第一天，当你过五关斩六将终于来到面试官面前时，他可能在面试你之前写过如下的代码: <el-image :src="url" lazy>

Bertha 。/ 2022年09月08日 11:51/ 0 赞/ 168 阅读

相关 js图片预加载

调用库函数 function loadimg(arr,funLoading,funOnLoad,funOnError){ var numLoade

ゝ一纸荒年。/ 2022年08月19日 11:14/ 0 赞/ 335 阅读

相关 js预加载图片

$(window).on("load", function(){ var imgList = [ "./images/layers/content.

痛定思痛。/ 2022年07月15日 03:50/ 0 赞/ 252 阅读

相关手写的js图片上传加载工具

1 图片上时，一般需要使用上传按钮+缩略图的形式上传文件，这样可以更好的提升用户体验 ![Center][] 2 在上面图片中，用户上传时可以点击

忘是亡心i/ 2022年06月07日 08:25/ 0 赞/ 87 阅读

相关 js图片加载效果（延迟加载+瀑布流加载）

概述两种图片加载的效果：一种是遇到图片较多时，带读条效果的加载提示；另一种是根据滑块的位置进行预加载，用户不察觉的情况下，实现瀑布流的加载效果详细代码下载

痛定思痛。/ 2022年05月31日 08:57/ 0 赞/ 463 阅读

相关 js上传图片

html: <form> <input type="file" value="上传图片" name="dataImg" clas

墨蓝/ 2022年03月01日 08:23/ 0 赞/ 206 阅读