画像アップロード
ファイル アップロード コントロール スタイル。変える方法。非同期アップロードを実装する方法。 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 /><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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
