画像アップロードソリューション-PHPチュートリアル-php.cn

画像アップロードソリューション

WBOY

リリース： 2016-06-13 12:02:39

オリジナル

1115 人が閲覧しました

画像アップロード
ファイルアップロードコントロールスタイル。変える方法。非同期アップロードを実装する方法。 iframeメソッドはすでに知っています。
------解決策---------
1. コントロールスタイルを変更するのは簡単ではありません。すべてのブラウザがサポートしています。現在のアプローチは、絶対配置を使用してファイルコントロール上に div を定義し、ファイルコントロールをブロックすることです。以下の私の例を参照してください。
2. 非同期アップロードが IE6、7、および 8 と互換性がない場合は、html5 を使用して画像の Base64 エンコードを取得し、ajax を使用してサーバーに投稿できます。 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 + '">');<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>

ログイン後にコピー