前端js实现图片上传

最新推荐文章于 2025-06-23 20:18:35 发布
原创 最新推荐文章于 2025-06-23 20:18:35 发布 · 8.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件，对input进行onchange事件的监听，当input的value值改变时代表用户已经上传了图片，而input的value值就是用户上传的图片的相对路径，new一个FileReader对象，将图片转换成base64格式的编码，动态创建img标签并将转换后的编码赋值给img标签的src属性即可。

首先，进行页面布局，页面布局是用的浮动布局。
[html]  view plain  copy
  1. <div class="content clearFlex">  
  2.             <form action="" enctype="multipart/form-data">  
  3.                 <div class="upImg clearFlex">  
  4.                     <div class="imgOnloadWrap"></div>  
  5.                     <div class="upWrap">  
  6.                         <div class="fileWrap">  
  7.                             <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>  
  8.                         </div>  
  9.                         <div class="imgWrap">  
  10.                             <img src="img/icon6.png" alt="" />  
  11.                         </div>  
  12.                     </div>  
  13.                 </div>  
  14.             </form>  
  15.         </div>  

其次对页面布局进行样式设计

[css]  view plain  copy
  1. .content{  
  2.     width:1000px;  
  3.     height: 800px;  
  4.     background:#fff;  
  5.     border-radius:10px;  
  6.     padding:10px;  
  7.     overflow-y: scroll;  
  8.     margin:0 auto;  
  9.     border:1px solid #333;  
  10.     border-color:rgba(169,169,169,1);  
  11. }  
  12. .upWrap{  
  13.     width:140px;  
  14.     height: 80px;  
  15.     margin:10px;  
  16.     float: left;  
  17.     position: relative;  
  18. }  
  19. .upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file],.upWrap > .imgWrap{  
  20.     position: absolute;  
  21.     height: 100%;  
  22.     width:100%;  
  23.     top:0;  
  24.     left:0;  
  25. }  
  26. .upWrap > .fileWrap > input[type=file]{  
  27.     z-index: 2;  
  28.     opacity: 0;  
  29. }  
  30. .upWrap > .imgWrap{  
  31.     z-index: 1;  
  32. }  
  33. .upWrap > .imgWrap > img{  
  34.     width:100%;  
  35.     height: 100%;  
  36. }  
  37. .upedImg{  
  38.     z-index: 3 !important;  
  39. }  
  40. .upedImg > span.deleteImg{  
  41.     position:absolute;  
  42.     content: 'X';  
  43.     width:20px;  
  44.     font-size: 16px;  
  45.     color:#ff0000;  
  46.     background:rgba(0,0,0,0.6);  
  47.     height:20px;  
  48.     text-align: center;  
  49.     line-height: 20px;  
  50.     right:0;  
  51.     top:0;  
  52.     z-index:4;  
  53. }  
  54. .clearFlex:after{  
  55.     clear: both;  
  56.     content: '';  
  57.     display: block;  
  58.     height: 0;  
  59.     zoom:1;  
  60. }  

最后对上传图片进行逻辑交互

[javascript]  view plain  copy
  1. /*------------------------------上传图片---------------------------*/  
  2. function upImg(obj){  
  3.     var imgFile = obj.files[0];  
  4.     console.log(imgFile);  
  5.     var img = new Image();  
  6.     var fr = new FileReader();  
  7.     fr.onload = function(){  
  8.         var htmlStr = '<div class="upWrap">';  
  9.         htmlStr += '<div class="fileWrap">';  
  10.         htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>';  
  11.         htmlStr += '</div>';  
  12.         htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';  
  13.         htmlStr += '<img src="'+fr.result+'" alt="" />';  
  14.         htmlStr += '</div>';  
  15.         htmlStr += '</div>';  
  16.         $('.imgOnloadWrap').append(htmlStr);  
  17.         obj.value = '';  
  18.     }  
  19.     fr.readAsDataURL(imgFile);  
  20. }  
  21. /*-----------------------------删除图片------------------------------*/  
  22. $(document).on('click','.upedImg .deleteImg',function(){  
  23.     //处理未来事件  
  24.     $(this).parent().parent().remove();  
  25. })  

[html]  view plain  copy
  1. <div class="content clearFlex">  
  2.             <form action="" enctype="multipart/form-data">  
  3.                 <div class="upImg clearFlex">  
  4.                     <div class="imgOnloadWrap"></div>  
  5.                     <div class="upWrap">  
  6.                         <div class="fileWrap">  
  7.                             <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>  
  8.                         </div>  
  9.                         <div class="imgWrap">  
  10.                             <img src="img/icon6.png" alt="" />  
  11.                         </div>  
  12.                     </div>  
  13.                 </div>  
  14.             </form>  
  15.         </div>  

其次对页面布局进行样式设计

[css]  view plain  copy
  1. .content{  
  2.     width:1000px;  
  3.     height: 800px;  
  4.     background:#fff;  
  5.     border-radius:10px;  
  6.     padding:10px;  
  7.     overflow-y: scroll;  
  8.     margin:0 auto;  
  9.     border:1px solid #333;  
  10.     border-color:rgba(169,169,169,1);  
  11. }  
  12. .upWrap{  
  13.     width:140px;  
  14.     height: 80px;  
  15.     margin:10px;  
  16.     float: left;  
  17.     position: relative;  
  18. }  
  19. .upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file],.upWrap > .imgWrap{  
  20.     position: absolute;  
  21.     height: 100%;  
  22.     width:100%;  
  23.     top:0;  
  24.     left:0;  
  25. }  
  26. .upWrap > .fileWrap > input[type=file]{  
  27.     z-index: 2;  
  28.     opacity: 0;  
  29. }  
  30. .upWrap > .imgWrap{  
  31.     z-index: 1;  
  32. }  
  33. .upWrap > .imgWrap > img{  
  34.     width:100%;  
  35.     height: 100%;  
  36. }  
  37. .upedImg{  
  38.     z-index: 3 !important;  
  39. }  
  40. .upedImg > span.deleteImg{  
  41.     position:absolute;  
  42.     content: 'X';  
  43.     width:20px;  
  44.     font-size: 16px;  
  45.     color:#ff0000;  
  46.     background:rgba(0,0,0,0.6);  
  47.     height:20px;  
  48.     text-align: center;  
  49.     line-height: 20px;  
  50.     right:0;  
  51.     top:0;  
  52.     z-index:4;  
  53. }  
  54. .clearFlex:after{  
  55.     clear: both;  
  56.     content: '';  
  57.     display: block;  
  58.     height: 0;  
  59.     zoom:1;  
  60. }  

最后对上传图片进行逻辑交互

[javascript]  view plain  copy
  1. /*------------------------------上传图片---------------------------*/  
  2. function upImg(obj){  
  3.     var imgFile = obj.files[0];  
  4.     console.log(imgFile);  
  5.     var img = new Image();  
  6.     var fr = new FileReader();  
  7.     fr.onload = function(){  
  8.         var htmlStr = '<div class="upWrap">';  
  9.         htmlStr += '<div class="fileWrap">';  
  10.         htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>';  
  11.         htmlStr += '</div>';  
  12.         htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';  
  13.         htmlStr += '<img src="'+fr.result+'" alt="" />';  
  14.         htmlStr += '</div>';  
  15.         htmlStr += '</div>';  
  16.         $('.imgOnloadWrap').append(htmlStr);  
  17.         obj.value = '';  
  18.     }  
  19.     fr.readAsDataURL(imgFile);  
  20. }  
  21. /*-----------------------------删除图片------------------------------*/  
  22. $(document).on('click','.upedImg .deleteImg',function(){  
  23.     //处理未来事件  
  24.     $(this).parent().parent().remove();  
  25. })  
html上传图片的原理,分享一个图片上传组件实现原理（React+Node）的实例教程
weixin_42348783的博客
05-31 901
本篇文章主要介绍了基于Node的React图片上传组件实现实例代码，非常具有实用价值，需要的朋友可以参考下写在前面红旗不倒，誓把JavaScript进行到底！今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node)，花了一些时间，希望对你有所帮助。前端实现遵循React 组件化的思想，我把图片上传做成了一个独立的组件(没有其他依赖)，直接import即可。im...
js上传文件并预览文件内容
weixin_46078854的博客
11-12 1672
1.获取文件内容： selectFile = (e) => { const file = e.target.files[0]; console.log('file>>>>',file);//此时发现找不到文件内容 if (!!file) { // 使用 FileReader 来读取文件 let reader = new FileReader() // 读取纯文...
js实现图片上传预览原理分析
10-19
主要为大家详细介绍了js实现图片上传预览的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
dom原理实现js上传图片预览
10-17
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览
【企业微信开发】jssdk实现h5图片上传
最新发布
hj1043的博客
06-23 465
本文详细介绍了在企业微信H5项目中使用JS-SDK实现图片上传功能的方法。主要内容包括： 关键API使用：chooseImage获取本地图片、getLocalImgData转换图片为base64格式 前端实现：通过企业微信JS-SDK选择图片并转换为base64，然后上传至服务器 后端处理：PHP接收base64图片数据，进行格式验证、目录创建、文件保存等操作 完整示例：包含前端表单页面代码和后台PHP处理逻辑 特别提醒开发者注意安卓和苹果设备在localIds使用上的差异，确保在不同平台都能正常获取图片数
js截取图片上传（仅原理）----闲的无聊了代码就不共享了！写的难看，不好意思给你们看了（囧）...
weixin_34066347的博客
04-22 139
就算世界再坑爹，总有一些属性能带你走出绝望（伟大的absolute） 今天吐槽一下！......在我的世界里没有正统UI，所以效果图永远都是那么坑爹！ 这里我要感谢有个position：absolute;   T_T 当遇到各种不合理布局的时候，至少还有它 吐槽完毕！！！   这个就是一个简单的图片截取工具！！简陋了点我承认 首先第一步，没什么大问题，解析图片格式 图片么无非就...
web前端图片上传
weixin_30718391的博客
03-20 199
图片上传有很多种形式，但是听说ios只能传字符串，所以为了安卓、ios和web能用一个接口上传图片，采用了基于base64 的方法上传图片。 下面是我的html 1 <div class="parn"> 2 <h6>店铺宣传海报</h6> 3 <div class="img-div"> 4 <i...
js实现前端图片上传即时预览功能
10-19
总结来说，使用JavaScript实现前端图片上传即时预览主要涉及以下几个关键点： 1. 使用`<input type="file">`元素让用户选择文件。 2. 获取用户选择的文件，使用`FileReader`对象的`readAsDataURL()`方法读取文件...
前端ocr.js 识别图片器，简单有效，不用后端实现，前端直接实现
04-27
总结起来，"前端ocr.js 识别图片器"是一个适用于前端开发的JavaScript OCR库，它提供了直接在浏览器中处理图像文字识别的能力，尤其适合英文和数字的识别，且易于集成和扩展。随着未来对汉字识别的支持，其应用领域...
js纯前端实现腾讯cos文件上传功能的示例代码
11-26
本文将详细讲解如何使用JavaScript SDK实现在纯前端实现腾讯COS的文件上传功能。 首先，为了实现文件上传，我们需要安装腾讯云COS的JavaScript SDK。这可以通过下载`cos-js-sdk-v5.min.js`文件并将它引入到HTML页面...
WEB前端实现裁剪上传图片功能
09-01
在HTML5中，我们可以利用`drag`和`drop`事件来实现图片的拖放操作。首先，我们需要阻止`dragover`事件的默认行为，以防止浏览器默认的文件打开行为。然后，在`drop`事件中获取拖放的文件对象，通常是一个`File`对象...
基于JS实现前端压缩上传图片的实例代码
10-17
本次分享的实例代码基于JavaScript实现了一个前端压缩图片并上传的功能，通过HTML5的File API和Canvas API，结合JavaScript，我们可以轻松地在客户端完成图片的压缩工作，并通过AJAX技术异步上传压缩后的图片到...
js图片上传
10-31
js图片上传js图片上传js图片上传js图片上传js图片上传
通过js实现压缩图片上传功能
10-15
主要介绍了通过js实现压缩图片上传功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
原生js上传图片
qq_39376013的博客
03-06 227
html: <input accept="image/*" type="file" class="myFileUpload" (change)="fileupload($event)" /> js: fileupload(e) { var imgFile = e.target.files[0]; //获取图片文件 if(imgFile.size/1...
纯前端实现图片上传功能
小猿同学628的博客
06-23 4891
纯前端实现图片上传功能，告别后端formData上传使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能了解了upload的基本属性之后我们要开始上硬菜了 使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能 首先简单了解一下ElmentUi的upload组件封装的自有属性： action ：必须填参数，主要用来存放上传地址；如果你认为自定义上传要使用到action这个属性那么你就大错特错了 headers ：设置上传请求的头部，对应的参数必须是一个参数 multi
jquery插件--ajaxfileupload.js上传文件原理分析
chelen_jak的专栏
09-19 1193
原文出处：http://blog.youkuaiyun.com/it_man/article/details/43800957 英文注解应该是原作者写的吧~说实话，有些if判断里的东西我也没太弄明白，但是大致思路还是OK的。 [javascript] view plain copy   jQuery.extend({       createUploadIfram
JS原生实现上传文件选择图片后预览
awhiteday的博客
02-22 279
在input中选择图片后，将图片渲染在页面上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值