移动端h5实现拍照上传图片并预览&webuploader
.移动端实现图片上传并预览，用到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
欢迎纠正和更好方法；
