suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  图片上传解决办法

图片上传解决办法

WBOY
WBOYOriginal
2016-06-13 12:02:391092Durchsuche

图片上传
文件上传控件样式。怎么改变。怎么实现异步上传。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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：二零一四年最佳的10款 PHP 开发框架Nächster Artikel：百度map中，怎么根据一个坐标点搜索数据库中附近多少距内的N个坐标点

In Verbindung stehende Artikel

Mehr sehen