精选文章 移动端h5实现拍照上传图片并预览&webuploader

移动端h5实现拍照上传图片并预览&webuploader

作者:xiaozhen0610 时间: 2020-08-05 08:50:53
xiaozhen0610 2020-08-05 08:50:53

.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象;经测除了android上不支持多图片上传,其他基本ok实用;

一:先说一下单张图片上传(先上代码):

html结构(含多张图片容器div):

1 
2

点击添加图片

3 4 5 移动端h5实现拍照上传图片并预览&webuploader1 6
7 8
9

 

css样式(由于默认file样式实在不好看,自定义透明覆盖改变了样式ps含多张图片容器div):

1 

js代码:

 1 //单张图片上传
 2     function upload(){ 
 3     var $c = document.querySelector("#fileBtn");//上传出发按钮
 4     var $d = document.querySelector("#img");//图片容器
 5     var file = $c.files[0];//获取file对象单张
 6     var reader = new FileReader();//创建filereader对象
 7         reader.readAsDataURL(file);//转换数据
 8         reader.onload = function(e){//加载ok时触发的事件
 9             console.log(file);
10         $d.setAttribute("src", e.target.result);//给图片地址,显示缩略图
11         $d.style.display="block";//样式显示
12     };
13 };  

 效果图(pc端截图,没截移动端的,参考下就好;移动端也是ok的):

移动端h5实现拍照上传图片并预览&webuploader2移动端h5实现拍照上传图片并预览&webuploader3

 

二:多张图片上传(android不支持):

只需将在方法里改变将file全部获取并遍历;(这里还可限制上传数量就没写了;)

 1  //多张图片
 2      function uploadm(){ 
 3     var $c = document.querySelector("#fileBtn");//上传出发按钮
 4     var $d = document.querySelector(".img-box");//图片容器
 5     var file = $c.files; //获取file对象,并进行遍历
 6     console.log(file.length);
 7     for(var i=0;i){
 8         var reader = new FileReader();
 9         reader.readAsDataURL(file[i]); 
10         reader.onload = function(e){ 
11         var oImg=new Image();
12         oImg.setAttribute("src", e.target.result);
13         oImg.setAttribute("class",'img');
14         $d.appendChild(oImg);
15         };
16     } 
17 };  

然后注意把input的multiple属性加上;

二:使用webuploader(图片上传神器):

ps:虽然是神器,也有缺陷的,跟h5的一样;

直接上(模拟头像图片上传功能)代码了:

首先引入插件(含Uploader.swf文件):

<link rel="stylesheet" type="text/css" href="css/webuploader.css"/>
<script type="text/javascript" src="js/webuploader.min.js">script>

html代码:

<div id="uploader-demo">
                
                <div id="fileList" class="uploader-list head-top"> 
                    <img src="img/zl-add.png" id="add"/>
                div>   
                 <div id="filePicker" style="position: absolute;left: 3.8rem;top: 2rem;opacity: 0;">上传图片div>
            div> 

css:

.head-top{width: 3rem;height: 3rem;border-radius: 1.5rem;margin: 0 auto;margin-top: 1rem;background: #e3e3e3;}
            #fileList img{width: 3rem;height: 3rem;border-radius: 1.5rem;}
            #fileList .info{display: none;}
            #fileList .error{display: none;}

js:

        // 初始化Web Uploader
            var uploader = WebUploader.create({
            
                // 选完文件后,是否自动上传。
                auto: true,
            
                // swf文件路径
                swf: 'js/Uploader.swf',
            
                // 文件接收服务端。
                server: 'http://ld-kj.cn/test/zlsfsb/controls/fileupload.php', 
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                pick: {
                    id:'#filePicker',
                    multiple:false
                }, 
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },
                method:"POST" 
            });
            
            var thumbnailWidth=100;
            var thumbnailHeight=100;
            var imageArray = [];
            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {  
                $("#add").remove(); 
                imageArray.push(file);
                console.log(imageArray);
                var $list = $("#fileList");
                $list.html("");
                var $li = $(
                        '
' + '移动端h5实现拍照上传图片并预览&webuploader4' + '
' + imageArray[imageArray.length-1].name + '
' + '
' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.append( $li ); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('不能预览'); return; } console.log(src); $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重复创建 if ( !$percent.length ) { $percent = $('

') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file ,res) { $( '#'+file.id ).addClass('upload-state-done'); console.log(res); imagename = res.image;//res为后台返回数据,此处为经后台编码后返回的图像储存数据 $("#valInput").val(res.image); }); // 文件上传失败,显示上传出错。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复创建 if ( !$error.length ) { $error = $('
').appendTo( $li ); } $error.text('上传失败'); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); });

实现的效果为:

移动端h5实现拍照上传图片并预览&webuploader5移动端h5实现拍照上传图片并预览&webuploader6

更多方法属性可参考:http://www.cnblogs.com/tugenhua0707/p/4605593.html

欢迎纠正和更好方法;

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:如何使数字指定位数,不足补零

下一篇:K8s CNI网络最强对比:Flannel、Calico、Canal和W

您可能感兴趣

  • web前端框架常见问题

    面向对象: 面向对象是一种程序开发的方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活性、重用性和扩展性。对象是把数据及对数据的操作方法放在一起,作为一个相互依存的整体。再说一下类与对象,类描述了一组有相同特性和相同行为的对象,具有相同属性和相同方法的对象的抽象就是类。即,对象的抽象是类,类的实例是对象。在面向对象的编程中,把用类创建对象的过程称为实例化。 面向过程与面...

  • php面试题整理

    一 、PHP基础部分 1、PHP语言的一大优势是跨平台,什么是跨平台? PHP的运行环境最优搭配为Apache+MySQL+PHP,此运行环境可以在不同操作系统(例如windows、Linux等)上配置,不受操作系统的限制,所以叫跨平台 2、WEB开发中数据提交方式有几种?有什么区别?百度使用哪种方式? Get与post两种方式 区别: (1)url可见性:get 方式url参数可见,pos...

  • 如何精准实现OCR文字识别?

    前言 2018年3月27日腾讯云云+社区联合腾讯云智能图像团队共同在客户群举办了腾讯云OCR文字识别——智能图像分享活动,活动举办期间用户耐心听分享嘉宾的介绍,并提出了相关的问题,智能图像团队的科学家和工程师也耐心解答可用户的疑问。以下就是活动分享的全部内容。 正文 在日常生活工作中,我们难免会遇到一些问题,比如自己辛辛苦苦写完的资料,好不容易打印出来却发现源文件丢了。难的收集了一些名片,却...

  • 前排强势围观|云端落地AI,如此超级干货有哪些?

    踏入变革与创新发展的时代,人工智能技术早已是不可规避的话题之一。 作为国内不容忽视的科技创新企业京东,京东AI针对应用场景的精准判断,走出了以业务场景驱动AI技术的发展之路,并且结合京东云的技术支撑能力来满足多维度的需求。 以此为背景,不久之前京东云特地来到重庆举办了主题为“云中生智,智领前沿——云端赋能下企业AI落地”的技术沙龙活动,以京东AI在各环节领域的技术创新和实践为着眼点,积极探索...

  • 软件测试方法归纳总结

    功能性测试 评审需求,多方面考虑,整理出内在外在以及非功能性的直接间接功能点,对比需求,提取测试点 根据常用的一些分析方法,等价类边界值判定表因果图场景法等方法,设计测试用例,对提取的功能点进行覆盖 测试各个阶段不断跟踪缺陷,做好用例的更新迭代和不断变更需求所带来的业务或者需求的错误 运行 App安装完成后的试运行,可正常打开软件 App打开测试,是否有加载状态进度提示 App打开速度测试,...

  • 炫技,从12.67s到1.06s的网站性能优化实战

    (给视学算法加星标,提升全栈技能) 作者:jerryOnlyZRJ https://juejin.im/post/5b6fa8c86fb9a0099910ac91 0.引言 作为互联网项目,最重要的便是用户体验。在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接收,特别是在如今移动端快速发展的时代,我们的网页不仅只是呈现在用户的PC浏览器里,更多的时候,用户是通过移动产品浏览我们的网...

  • 2019最新Android常用开源库总结

    怕删除,转载一下 原文:https://blog.csdn.net/wenwins/article/details/102387021 前言 收集了一些比较常见的开源库,特此记录(已收录350+)。另外,本文将持续更新,大家有关于Android 优秀的开源库,也可以在下面留言。 一 、基本控件 1.TextView HTextView 一款支持TextView文字动画效果的Android组件...

  • 美通企业日报 | 全球金融科技50强榜中企居首;施乐退出与富士胶片合资企业...

    今日看点 11月4日,KPMG(毕马威)和金融科技投资公司H2 Ventures联合发布了2019年全球金融科技100强榜单 (Fintech100)。入选 Fintech100的公司,既有全球首屈一指的50家金融科技公司,也包括引人注目的50家“明日之星”;前者以创新能力、资金筹集、企业规模和影响范围为标准,后者则普遍处于创新技术前沿,并致力追求全新的业务模式。蚂蚁金服、Grab和京东数字...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。