开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js移动端选择多张图片

在JavaScript中，移动端选择多张图片通常涉及到HTML5的<input>元素的type="file"属性，结合multiple属性来实现。以下是关于这一功能的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

<input type="file">: HTML元素，允许用户从他们的设备选择一个或多个文件。
multiple属性: 允许用户选择多个文件。

优势

用户体验: 用户可以一次性上传多张图片，提高效率。
灵活性: 适用于需要批量上传图片的场景，如社交媒体、电商平台的商品图片上传等。

类型

单选: 不使用multiple属性，默认只能选择一张图片。
多选: 使用multiple属性，可以选择多张图片。

应用场景

社交媒体: 用户上传多张照片到朋友圈或微博。
电商平台: 卖家上传商品的多角度图片。
相册应用: 用户批量导入手机中的照片。

示例代码

以下是一个简单的HTML和JavaScript示例，展示如何在移动端实现多张图片的选择和预览：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多图上传示例</title>
<style>
  .preview {
    display: flex;
    flex-wrap: wrap;
  }
  .preview img {
    width: 100px;
    height: 100px;
    margin: 5px;
  }
</style>
</head>
<body>

<input type="file" id="fileInput" multiple accept="image/*">
<div class="preview" id="preview"></div>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
  const preview = document.getElementById('preview');
  preview.innerHTML = ''; // 清空之前的预览
  for (let i = 0; i < event.target.files.length; i++) {
    const file = event.target.files[i];
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      preview.appendChild(img);
    };
    reader.readAsDataURL(file);
  }
});
</script>

</body>
</html>

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

浏览器兼容性: 某些旧版浏览器可能不完全支持multiple属性。
- 解决方案: 使用特性检测来提供降级方案，或者提示用户升级浏览器。

文件大小限制: 浏览器或服务器可能对上传的文件大小有限制。
- 解决方案: 在客户端和服务器端都进行文件大小的检查，并给出相应的错误提示。
性能问题: 大量图片同时上传可能导致页面卡顿或网络拥塞。
- 解决方案: 使用分片上传技术，将大文件分割成小块逐个上传，或者限制同时上传的文件数量。

通过上述方法，可以有效地在移动端实现多张图片的选择和上传功能，并处理可能出现的各种问题。

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

有帮助

没帮助

相关·内容

JS判断单、多张图片加载完成

(此时图片没有加载完毕)，onload是指dom的生成和资源完全加载（比如flash、图片）出来后才执行。接下来回到正题，先从单张图片说起。...3、以下内容省略兼容（2）、单张图片（图片动态生成） //js var xiu = new Image() xiu.src = 'http://www.daqianduan.com/wp-content.../uploads/2014/11/hs-xiu.jpg' xiu.onload = function(){ // 加载完成 } （3）、单张图片（结合ES6 Promise） //js...xiu.onload = function(){ // 加载完成 resolve(xiu) } }).then((xiu)=>{ //code }) （4）、多张图片...flag++ if( flag == imgTotal ){ //全部加载完成 } } } （5）、多张图片（结合ES6 Promise.all

12.5K2 0

js实现单张或多张图片持续无缝滚动

背景：想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符...原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设置过渡动画的...，2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。...实现： html主要包含三块： 1、最外层盒子，用来展示滚动图的区域，overflow:hidden; 2、滚动的盒子，主要改变该盒子的定位值，来实现滚动，里面包含所有要滚动的图片或文字 3、包含图片或文字的盒子...= opts.elemBox; //图片展示区域元素，为了获取展示区域的高度 this.direction = opts.direction; this.time =

7.6K1 0

【Android源码解析】选择多张图片上传多图预览

好了下面具体的分析一下：（想要做出功能，需求分析是必不可少的，需求、逻辑弄懂了再上手写代码，思路会很清晰的） 1.多图上传首先得选择图片（这里项目需求是既可以拍照上传也可以从相册中选择） 2.拍照上传很简单了网上也有很多例子...，调用照相机，返回uri，获取图片 3.从相册中选择图片 3.1 获取手机中的所有图片 3.2 将图片存到自定义图片数组中显示 3.3 自定义ViewPager浏览图片 . ....，适配器（新建、上传失败、上传成功的图片我用的都是一个adapter） ImageItem是图片的模型，下面有它的属性 //从图库选择的图片model public class ImageItem extends...，adapter中添加一个flag用来显示新建的图片，将选择的图片添加到公有的图片数组中，初始化的时候加载图片数组显示。...Bimp.tempSelectBitmap.size() + "/"+ NeedApplication.picNums+")"); } isShowOkBt(); } }); 点击图片选择加到公有图片数组中显示已选择

3.5K2 0

js判断移动端和pc端

//判断是手机端还是pc端 function isPc(){ if(window.navigator.userAgent.match(/(phone|pad|pod...MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return true; // 移动端...}else{ return false; // PC端 } }

10.8K6 1

移动端时间选择器

开发的一个简单的移动端时间选择器，支持多种主题，现在来共享一下。...引入CSS和JavaScript脚本： js..."> 简单的表单（input）选择日期" /> 初始化时间选择器 var picker...= new LazyPicker('.date-picker'); 这里的class可自定义，不过要对应你要将其设置为时间选择器的input的class。...onChange: function(data) { // 监听选择时间改变 // data返回一个对象，包含属性year、month、day、date，分别表示年、月、日、日期如果你发现Bug

2.9K10 0

移动端时间选择器

本文作者：IMWeb 郭明慧原文出处：IMWeb社区未经同意，禁止转载开发的一个简单的移动端时间选择器，支持多种主题，现在来共享一下。...引入CSS和JavaScript脚本： js..."> 简单的表单（input）选择日期" /> 初始化时间选择器 var picker...= new LazyPicker('.date-picker'); 这里的class可自定义，不过要对应你要将其设置为时间选择器的input的class。...onChange: function(data) { // 监听选择时间改变 // data返回一个对象，包含属性year、month、day、date，分别表示年、月、日、日期如果你发现Bug

2.6K1 0

移动端app开发，框架的选择。

从事java开发快三年了，最近公司因项目要求需要做一款app,个人对这方面兴趣比较大，于是网上收集资料，框架的选择，技术的论证，到今天项目需求的各个功能都做出了相应的demo同时也打好了框架，接下来就是完成细节的部分了...框架的选择，因为一直在关注前端方面的知识，也在学习前端，nodejs、 agularjs、bootstrap、有所涉猎，在项目中前端也用到jquery easyui html5另外html5最近比较火也打算从前端入手...提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就。...框架我最后选择ionic ,ionic集成cordova，在ionic中的ngcordova 可以对原生设备的调用。...在项目中，使用ngcordova 完成本地存储、二维码扫描、照相、图片上传、离线在线、gps定位等。

3.6K1 0

js移动端中touch事件

触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel

8.9K2 0

js 判断当前是移动端还是PC端

源代码：https://gitee.com/miofly/resources // 移动端兼容 ;var adaptive={};(function(f,g){var h=f.document;var...=750;window['adaptive'].scaleType=1;window['adaptive'].init();; function isPc () { // 判断是移动端还是...PC端 var _$=["Win", "Mac", "X11"]; var is_win=navigator["platform"]["indexOf"](_$[0])==0;...'PC端' : '移动端')

11.2K4 0

移动端两端对齐 + 图片宽度自适应

下面是正经的一种写法：图片单元float，宽度设置为50%，奇数单元设置margin-right为10px, 偶数单元设置margin-right为-10px。...父元素设置左padding为4px，右padding为14px，父元素的padding值正好是所有间距的总和，所以它实际宽度的50%是正好符合需求的图片单元宽度。...偶数单元的负margin（-10px）和父元素右padding（14px）会中和成4px的右边距（实际上是因为元素负margin会使其右边的元素向左移动并被其覆盖）运营的同学在实际操作中，做的图可能不会很标准...，所以我们需要做一些简单地容错，即是图片垂直居中在图片单元内，图片单元设置padding-top为一个百分比，这个百分比为设计稿中图片的宽高比。...这样即使图片有些误差也不会影响总体的排版布局，垂直居中的原理是 top 百分比的基数是父元素 translate百分比的基数是元素本身。

1.5K4 0

JS制作跟随鼠标移动的图片

JS制作跟随鼠标移动的图片效果展示案例简介本文讲解如何使用JS制作可以跟随鼠标移动的图片，我这里是用一直天使的gif图片演示的。构建HTML框架图片设置为绝对定位 */ position: absolute; } JS逻辑 // 获取图片元素 var pic = document.querySelector('img'); // 添加鼠标移动事件 document.addEventListener...(1); // 2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片 var x =...// 2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片 var x = e.pageX;

591 0

工程部署(一)移动端算子选择

下图为不同激活函数运算时所占用内存大小：对于ReLU和LeakyReLU等激活函数，是我们在轻量级网络和移动端部署最常见的（目前还没见过带Mish函数的轻量级网络），一方面，作为常数量级算子，耗时延迟低

8942 0

picker-extend 移动端级联选择插件

picker-extend.js 一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数...、兼容pc端拖拽等等.....特性原生js移动端选择控件，不依赖任何库可传入普通数组或者json数组可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择自动识别是否级联选择成功后，提供自定义回调函数callback...对三级联动地区 - 增加推荐字样（特殊化展示）简书 picker-extend 移动端级联选择插件（简书）掘金 picker-extend 移动端级联选择插件（掘金） npm 地址...picker-extend 移动端级联选择插件（npm）引入方式一标签引入： <link rel="stylesheet" type="text/css" href="css/picker-extend.css

4.5K1 0

原生JS实现移动端滑动反弹

就是类似于 PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 Touch事件结合 js去实现，效果如下： ? 1. 准备工作什么是移动端的 Touch事件？...在移动端 Touch事件可以细分成三种，分别是： touchstart、 touchmove和 touchend，并且 touch事件必须要用 addEventListener去监听。...我们可以看下上面的图片，在 changedTouche[0]中，有些值： clientX:74 // 触摸点相对于浏览器的 viewport 左边缘的 x 坐标，不会包括左边的滚动距离。...基本结构此案例模拟的是移动端的一种滑动菜单效果。...maximum-scale=1.0, minimum-scale=1.0"> 移动端

10.4K2 0

flow-vue.js移动端效果

得益于vue.js和element，以及vue-element-extends在线表格编辑。前后端分离的后端用golang+beego框架，服务器采用腾讯云。

4.7K3 0

实用的日期选择器插件集合（PC端 + 移动端）

方式一：My97DatePicker My97DatePicker 可谓有年头了，使用起来非常方便，而且文档介绍的也非常全面，唯一的不足之处是移动端不是很友好。...示例图（我改了他的源码，所以在移动端也是100%宽度显示，不过依然丑） html <form action="{{url('')}}" method="post" id="date-submit-search..., onpicked:dateSearch }) } 方式二：HTML5 以前一直没用过，最近使用才发现，原来HTML5的日期选择器在移动端表现是那么的惊艳...以前一直在找滚动选择日期的，现在H5可以取代了。...这是浏览器仿真这是移动端，有没有很惊艳 html <input

8713 0

移动端滚动加载-----jQuery 和原生JS

bind('scroll',isScrollBottom);},2000); } } $(window).bind('scroll',isScrollBottom); 原生JS

22.3K1 0

原生js实现简单移动端轮播图

最近项目不是很忙，自己就用原生js写了一个简单的移动端轮播图的小demo，可实现自动轮播和手势滑动轮播，然后就把它记录到个人博客里。还有很多不足的地方，希望多多指出，以便改进。...1、代码部分分为四个文件：　　slideshow.html 　　slideshow.css 　　base.js 　　slideshow.js 1.1、slideshow.html 移动端...{ padding: 0; margin: 0; -webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/ box-sizing: border-box...,sans-serif;/*移动端默认的字体*/ font-size: 14px; color: #333; } ol,ul{ list-style: none; } /*清除浮动

20.7K6 0

移动端重构实战系列6——icon与图片

本文作者：IMWeb 结一原文出处：IMWeb社区未经同意，禁止转载 ”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，...“ ——imweb 结一本篇主要从icon及图片说下移动端重构碰到的一些问题及实践方法。...如果你多刷新几次应该就可以看到卡片1与2的图片区别了，1的图片区域有了高度，而2没有，所以1图片的加载不会影响下面内容的变化，而2加载图片会把下面内容向下排挤。...} 其中mixin object-wrap在sandal中定义如下（具体解释可参阅css中如何做到容器按比例缩放）： // object wrap // $child 参数请使用单引号，因为用于子元素选择器...以微信的朋友圈头部的背景图片为例（这里只是进行分析，具体的实现技术我也不知道）：在更换相册封面的时候，对选择的图片进行了1:1的裁剪按照第二种情况，设置背景图片的容器的高度等于宽度(图片是1:1)，

7131 0

js判断是否是电脑端访问还是移动端访问

2015-12-21 00:36:14 在进行网站开发中经常会遇到一些只允许电脑端访问，但是不允许移动端访问，或者说是只允许移动端访问，不允许pc端访问，所以需要我们判断一下用户的访问端类型。

6.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭