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

忘是亡心i 2022-06-07 08:25 144阅读 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 条评论，144人围观）

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

相关阅读

相关原生图片上传与加载

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

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

相关原生js写了一个图片懒加载的功能

用原生 js 写了一个图片懒加载的功能分享给大家如有问题请立即指出 <!DOCTYPE html> <html lang="en"> <head

痛定思痛。/ 2023年06月17日 02:59/ 0 赞/ 13 阅读

相关 js图片懒加载和预加载

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan] 什么是懒加载和预加载？复杂

快来打我*/ 2023年06月05日 08:11/ 0 赞/ 50 阅读

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

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

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

相关手写 vue loading加载组件

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

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

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

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

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

相关 js图片预加载

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

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

相关 js预加载图片

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

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

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

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

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

相关 js上传图片

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

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