图片上传解决办法
- WBOY原創
- 2016-06-13 12:02:391092瀏覽
图片上传
文件上传控件样式。怎么改变。怎么实现异步上传。iframe方法我已经知道了。
------解决方案--------------------
1.控件样式不好改，并不是所有浏览器都支持。现在的做法是在file控件上，用绝对定位absolute定义一个div遮挡file控件实现。可参考我下面的例子。
2.异步上传如果不用兼容IE6,7,8，可以用html5获取图片的base64编码，再用ajax post到服务器。如果需要兼容IE6,7,8就只能iframe或flash实现。
html5异步上传图片例子：
<br /><!DOCTYPE HTML PUBLIC> <br /><html> <br /> <head> <br /> <meta charset="utf-8"> <br /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <br /> <title>图片异步上传,不使用iframe</title><br /> <br /> <style type="text/css"> <br /> body{margin: 0px; background:#f2f2f0;} <br /> p{margin:0px;} <br /> .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;} <br /> .file{position:absolute; width:100%; font-size:90px;} <br /> .filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;} <br /> .filebtn:hover{background:#04bc0d;} <br /> .showimg{margin:10px auto 10px auto; text-align:center;} <br /> </style> <br /> <br /> <script type="text/javascript"> <br /> window.onload = function(){ <br /> <br /> var canvas = document.createElement('canvas'); <br /> var context = canvas.getContext('2d'); <br /> <br /> document.getElementById('img').onchange = function(){ <br /> var img = event.target.files[0]; <br /> <br /> if(!img){ <br /> return ; <br /> } <br /> <br /> if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg<br><font color='#FF8000'>------解决方案--------------------</font><br>png<br><font color='#FF8000'>------解决方案--------------------</font><br>gif)$/.test(img.name)) ){<br /> alert('图片只能是jpg,gif,png'); <br /> return ; <br /> } <br /> <br /> var reader = new FileReader(); <br /> reader.readAsDataURL(img); <br /> <br /> reader.onload = function(e){ // reader onload start <br /> // ajax 上传图片<br /> $.post("server.php", { img: e.target.result},function(ret){<br /> if(ret.img!=''){<br /> alert('upload success');<br /> $('#showimg').html('<img src="' + ret.img + '" alt="图片上传解决办法" >');<br /> }else{<br /> alert('upload fail');<br /> }<br /> },'json');<br /><br /> }<br /> } <br /> <br /> } <br /> </script> <br /> <br /> </head> <br /> <br /> <body> <br /> <p class="title">图片异步上传,不使用iframe</p><br /> <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片</label></p> <br /> <p class="showimg" id="showimg"></p> <br /> </body> <br /></html><br />server.php
<br><?php <br />$img = isset($_POST['img'])? $_POST['img'] : '';<br>list($type, $data) = explode(',', $img);<br>if(strstr($type,'jpeg')!==''){<br> $ext = '.jpg';<br>}elseif(strstr($type,'gif')!==''){<br> $ext = '.gif';<br>}elseif(strstr($type,'png')!==''){<br> $ext = '.png';<div class="clear">
</div>陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn