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

Posted sql

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端h5实现拍照上传图片并预览相关的知识,希望对你有一定的参考价值。

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

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

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

1 <div class="fileBtn"> 
2         <p>点击添加图片</p>
3         <input id="fileBtn" type="file" onchange="upload();" accept="image/*" capture="camera" multiple="multiple"/> 
4         <!--单张图片容器-->
5         <img src="" id="img"/>
6     </div>
7     <!--多张图片容器-->
8    <div class="img-box"> 
9    </div> 

 

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

1 <style type="text/css">
2         #fileBtn{width: 100px;height: 100px; position: absolute;display: block;top: 0;left: 0;opacity: 0;} 
3         .fileBtn{width: 100px;height: 100px;border: 2px dashed lightskyblue;text-align: center;position: relative;left: 50px;top: 50px;}
4         .fileBtn p{line-height: 60px;}
5         #img{width: 100px;height: 100px;position: absolute;top: 0;left: 0;z-index: 10;display: none;}
6         .img{width: 100px;height: 100px;}
7         .img-box{margin-top: 80px;}
8     </style>

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的):

 

二:多张图片上传(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<file.length;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">
                <!--用来存放item-->
                <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 = $(
                        \'<div id="\' + imageArray[imageArray.length-1].id + \'" class="file-item thumbnail">\' +
                            \'<img>\' +
                            \'<div class="info">\' + imageArray[imageArray.length-1].name + \'</div>\' +
                        \'</div>\'
                        ),
                    $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(\'<span>不能预览</span>\');
                        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 = $(\'<p class="progress"><span></span></p>\')
                                .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 = $(\'<div class="error"></div>\').appendTo( $li );
                    }
                
                    $error.text(\'上传失败\');
                });
                
                // 完成上传完了,成功或者失败,先删除进度条。
                uploader.on( \'uploadComplete\', function( file ) {
                    $( \'#\'+file.id ).find(\'.progress\').remove();
                });

实现的效果为:

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

欢迎纠正和更好方法;

 

以上是关于移动端h5实现拍照上传图片并预览的主要内容,如果未能解决你的问题,请参考以下文章

H5拍照选择图片上传组件核心

h5移动端实现图片文件上传

h5移动端实现图片文件上传

PC端 H5实现拍照并上传

h5 实现调用系统拍照或者选择照片并预览

华为使用h5上传图片没有gps信息