recherche

Maison >développement back-end >tutoriel php >图片上传解决办法

图片上传解决办法

WBOY
WBOYoriginal
2016-06-13 12:02:391119parcourir

图片上传
文件上传控件样式。怎么改变。怎么实现异步上传。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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：二零一四年最佳的10款 PHP 开发框架Article suivant：百度map中，怎么根据一个坐标点搜索数据库中附近多少距内的N个坐标点

Articles Liés

Voir plus