移动端图片上传预览

author author     2022-09-12     565

关键词:

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加、不能限制上传图片的数量。

input虽然有multiple(多选),但是android目前是不支持的。

该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(;′д`)ゞ

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8         <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
  9         <title>多图片上传</title>
 10 
 11         <style>
 12             * {
 13                 margin: 0;
 14                 padding: 0;
 15             }
 16             /*图片上传*/
 17             
 18             html,
 19             body {
 20                 width: 100%;
 21                 height: 100%;
 22             }
 23             
 24             .container {
 25                 width: 100%;
 26                 height: 100%;
 27                 overflow: auto;
 28                 clear: both;
 29             }
 30             
 31             .z_photo {
 32                 width: 5rem;
 33                 height: 5rem;
 34                 padding: 0.3rem;
 35                 overflow: auto;
 36                 clear: both;
 37                 margin: 1rem auto;
 38                 border: 1px solid #555;
 39             }
 40             
 41             .z_photo img {
 42                 width: 1rem;
 43                 height: 1rem;
 44             }
 45             
 46             .z_addImg {
 47                 float: left;
 48                 margin-right: 0.2rem;
 49             }
 50             
 51             .z_file {
 52                 width: 1rem;
 53                 height: 1rem;
 54                 background: url(z_add.png) no-repeat;
 55                 background-size: 100% 100%;
 56                 float: left;
 57                 margin-right: 0.2rem;
 58             }
 59             
 60             .z_file input::-webkit-file-upload-button {
 61                 width: 1rem;
 62                 height: 1rem;
 63                 border: none;
 64                 position: absolute;
 65                 outline: 0;
 66                 opacity: 0;
 67             }
 68             
 69             .z_file input#file {
 70                 display: block;
 71                 width: auto;
 72                 border: 0;
 73                 vertical-align: middle;
 74             }
 75             /*遮罩层*/
 76             
 77             .z_mask {
 78                 width: 100%;
 79                 height: 100%;
 80                 background: rgba(0, 0, 0, .5);
 81                 position: fixed;
 82                 top: 0;
 83                 left: 0;
 84                 z-index: 999;
 85                 display: none;
 86             }
 87             
 88             .z_alert {
 89                 width: 3rem;
 90                 height: 2rem;
 91                 border-radius: .2rem;
 92                 background: #fff;
 93                 font-size: .24rem;
 94                 text-align: center;
 95                 position: absolute;
 96                 left: 50%;
 97                 top: 50%;
 98                 margin-left: -1.5rem;
 99                 margin-top: -2rem;
100             }
101             
102             .z_alert p:nth-child(1) {
103                 line-height: 1.5rem;
104             }
105             
106             .z_alert p:nth-child(2) span {
107                 display: inline-block;
108                 width: 49%;
109                 height: .5rem;
110                 line-height: .5rem;
111                 float: left;
112                 border-top: 1px solid #ddd;
113             }
114             
115             .z_cancel {
116                 border-right: 1px solid #ddd;
117             }
118         </style>
119     </head>
120 
121     <body>
122 
123         <div class="container">
124             <!--    照片添加    -->
125             <div class="z_photo" id="z_photo">
126                 <div class="z_file">
127                     <input class="huodong-msg" type="file" name="file" id="file" value="" accept="image/jpg,image/jpeg,image/png" multiple onchange="imgChange(‘z_photo‘,‘z_file‘);" />
128                 </div>
129             </div>
130 
131             <!--遮罩层-->
132             <div class="z_mask">
133                 <!--弹出框-->
134                 <div class="z_alert">
135                     <p>确定要删除这张图片吗?</p>
136                     <p>
137                         <span class="z_cancel">取消</span>
138                         <span class="z_sure">确定</span>
139                     </p>
140                 </div>
141             </div>
142         </div>
143 
144         <script type="text/javascript">
145             //px转换为rem
146             (function(doc, win) {
147                 var docEl = doc.documentElement,
148                     resizeEvt = orientationchange in window ? orientationchange : resize,
149                     recalc = function() {
150                         var clientWidth = docEl.clientWidth;
151                         if(!clientWidth) return;
152                         if(clientWidth >= 640) {
153                             docEl.style.fontSize = 100px;
154                         } else {
155                             docEl.style.fontSize = 100 * (clientWidth / 640) + px;
156                         }
157                     };
158 
159                 if(!doc.addEventListener) return;
160                 win.addEventListener(resizeEvt, recalc, false);
161                 doc.addEventListener(DOMContentLoaded, recalc, false);
162             })(document, window);
163 
164             function imgChange(obj1, obj2) {
165                 var fileNum1 = 0;
166                 var fileNum2 = event.target.files.length;
167                 var a = document.getElementById("z_photo"),
168                     b = a.getElementsByTagName("div");
169                 fileNum1 = b.length;
170                 var j = fileNum1 + fileNum2 - 1;
171                 //上传图片个数限制
172                 if(fileNum1 > 5 || j > 5) {
173                     alert("最多只能上传5张图片!");
174                     return;
175                 }
176                 //获取点击的文本框
177                 var file = document.getElementById("file");
178                 //存放图片的父级元素
179                 var imgContainer = document.getElementsByClassName(obj1)[0];
180                 //获取的图片文件
181                 var fileList = file.files;
182                 //文本框的父级元素
183                 var input = document.getElementsByClassName(obj2)[0];
184                 var imgArr = [];
185                 //遍历获取到得图片文件
186                 for(var i = 0; i < fileList.length; i++) {
187                     var imgUrl = window.URL.createObjectURL(file.files[i]);
188                     imgArr.push(imgUrl);
189                     var img = document.createElement("img");
190                     img.setAttribute("src", imgArr[i]);
191                     var imgAdd = document.createElement("div");
192                     var imgAddInput = document.createElement("input");
193                     imgAddInput.setAttribute("type", "hidden");
194                     imgAddInput.setAttribute("value", imgArr[i]);
195                     imgAdd.appendChild(imgAddInput);
196                     imgAdd.setAttribute("class", "z_addImg");
197                     imgAdd.appendChild(img);
198                     imgContainer.appendChild(imgAdd);
199 
200                 };
201                 file.classList.add("z_cl");
202                 imgRemove();
203             };
204             
205             //删除图片
206             function imgRemove() {
207                 var imgList = document.getElementsByClassName("z_addImg");
208                 var mask = document.getElementsByClassName("z_mask")[0];
209                 var cancel = document.getElementsByClassName("z_cancel")[0];
210                 var sure = document.getElementsByClassName("z_sure")[0];
211                 var file = document.getElementById("file");
212                 for(var j = 0; j < imgList.length; j++) {
213                     imgList[j].index = j;
214                     imgList[j].onclick = function() {
215                         var t = this;
216                         mask.style.display = "block";
217                         cancel.onclick = function() {
218                             mask.style.display = "none";
219                         };
220                         sure.onclick = function() {
221                             mask.style.display = "none";
222 
223                             if(file.classList.contains("z_cl")) {
224                                 file.outerHTML = file.outerHTML;
225                             }
226 
227                             t.parentNode.removeChild(t);
228                             file.classList.remove("z_cl");
229                         };
230 
231                     }
232                 };
233             };
234 
235             
236         </script>
237     </body>
238 
239 </html>

技术分享

( ?′ω`? )用到的图片  

移动端js实现图片上传预览

方法一:<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面</title><scripttype="text/javascript"&g 查看详情

移动端预览(双指缩放移动)富文本编辑器上传的图片(代码片段)

通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能。1.安装插件npminstallvue-photo-preview--save2.main引入importpreviewfrom'vue-photo-preview'import'vue-photo-preview/dist/skin.css'Vue.use 查看详情

vue移动端图片预览,使用photoswipe插件

参考技术Aphotoswipe.js 查看详情

js移动端多图上传预览传给后端

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的实例拥有4个方法,其中3个用以读取文件,另一个用来中断读取。下面的表格列... 查看详情

htmlcss图片居中(水平居中和垂直居中),移动端图片预览

做网站的时候,经常会遇到因图片宽高比率不一致导致图片显示方式有问题。 1、在图片宽高未知的情况下,图片上下左右居中  我以前的博客文章有写过,就不再重复了。博客地址,效果预览地址(欢迎copy) 上面... 查看详情

jquery图片上传前先在本地预览(不经过后端处理)

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:fakepatha.jpg... 查看详情

图片移动端图片上传旋转压缩的解决方案

移动端图片上传旋转、压缩的解决方案来源知乎  作者 林鑫 工作上有手机上传准考证等图片的功能,这个是非常必要的,作者写的很全面,就直接记录这个地址了 还有一篇文件的上传、下载  查看详情

移动端图片压缩上传解决方案

最近做移动端图片上传,发现图片尤其是iPhone拍照的图片都有2M左右,但是实际上项目中用不到这么大,于是想到要用js在前台进行压缩。解决方案如下: 【一】获取图片数据  先是获取图片数据,也就是监听inputfile的change... 查看详情

angularjs+ionic移动端图片上传的解决办法

...己写一个图片上传的方法。今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是j 查看详情

纯原生js移动端图片压缩上传插件

...就不吐槽了,然后当然是自己做了,先上图:纯原生js的移动端图片压缩上传插件,不依赖任何库用法在html页面中引入input标签,通过 查看详情

移动端调用相机拍照上传图片

<inputtype="file"capture="camera"accept="image/*"id="filetest"name="filetest">看这代码,重要的是capture="camera"accept="image/*"。  查看详情

移动端h5如何上传zip文件

参考技术A移动端h5上传zip文件方法:1、拍照或者选择图片并获取图片的路径。2、压缩图片。3、找到压缩完的图片先转换成base64再转换成可以添加到FormData上传的File。4、添加数据上传。 查看详情

vue移动端图片上传,可最多上传9张,使用webuploader插件

参考技术A图片上传WebUploader.js 查看详情

移动端图片上传老失败

做移动端开发的时候,form里面的file后台经常获取不到,用foemdata也拿不到找到了一个formdata的脚本<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metacontent="width=device-width,initial-scale=1.0,maximum 查看详情

快速创建vue移动端上传图片功能

参考技术A主要功能:限制图片张数、图片大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。使用配置:使用vantUI、axios请求经过封装、安装image-compressor.js图片压缩npminstallimage-compressor.js//注意是image-comp... 查看详情

h5移动端实现图片文件上传(代码片段)

PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。 JS代码:<scripttype="text... 查看详情

优化篇-“移动端”图片上传架构的变迁

...察,APP、WAP的用户量基本与PC端持平甚至超越,因此,应移动端用户体验和访问速度都被运营方盯得紧紧。在2014年的时候已经看到 查看详情

移动端上传照片

...件,在这里我要感谢作者,虽然不知道是谁。应用场景:移动端管调用手机相册和相机,上传图片给接口进行识别插件下载百度云地址:链接:https:// 查看详情