Flex 布局教程: 实例篇
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>html5 移动端上传本地图片 </title>
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
- <style type="text/CSS">
- #test div{ width:200px; height:200px; display:inline-block; text-align:center;}
- #test div img{ max-width:200px; max-height:200px;}
- </style>
- </head>
- <body>
- <input type="file" id="file_input" multiple />
- <div id="test"></div>
- <script>
- window.onload = function(){
- var input = document.getElementById('file_input');
- var result, div;
- if(typeof FileReader === 'undefined'){
- result.innerHTML = "抱歉, 你的浏览器不支持 FileReader";
- input.setAttribute('disabled','disabled');
- }else{
- input.addEventListener('change', readFile, false);
- }
- function readFile(){
- for(var i=0; i<this.files.length; i++){
- if( !input['value'].match(/.jpg|.gif|.png|.bmp/) ){ // 判断上传文件格式
- return alert('上传的图片格式不正确')
- }
- var reader = new FileReader();
- reader.readAsDataURL(this.files[i]);
- reader.onload = function(e){
- result = '<img src="' + this.result + '"/>'
- div = document.createElement('div')
- div.innerHTML += result
- document.getElementById('test').appendChild(div)
- }
- }
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/41608/aee6f8549d9475877a32ff555ad080d0.html