HTML5 による画像アップロード、モバイル端末と PC 端末の共通コード共有-H5 チュートリアル-php.cn

この記事は、HTML5 アップロード画像モバイル端末と PC 端末の一般的なコードの関連情報を主に紹介します。非常に優れており、必要な友人は参考にすることができます。

これ以上ナンセンスではないので、共有したいことについて話しましょう。今日は HTML5 で写真をアップロードします。モバイル端末で使用していますが、PC でも普遍的に互換性があります。Google でのみテストしています。「HTML5 の File API を使用して、アップロードされた画像をプレビューする」は angular で書かれていました。今日は angular のことはやめて、html5 + js 画像アップロードの事例を共有します。それでは、今日は特定の手順に従ってみましょう。

HTML5 による画像アップロード、モバイル端末と PC 端末の共通コード共有

HTML 最初のステップは HTML を作成することです。ページ内にファイル選択用の input#upload を配置します (PS: 面倒なので、ここでは再度ケースを作成せず、ページをコピーするだけです)。 )

<p class="con4">     
 <span class="btn upload">上传<input type="file" class="upload_pic" id="upload" /></span>     
</p>

ログイン後にコピー

CSS注: CSS が少しわかりにくい場合は、私に聞いてもいいし、自分で書いても構いません。

CSS Code复制内容到剪贴板
con{      
     width: %;      
     height: auto;      
     overflow: hidden;      
     margin: % auto  auto;      
     color: #FFFFFF;      
}      
con .btn{      
     width: %;      
     height: px;      
     line-height: px;      
     text-align: center;      
     background: #dbc;      
     display: block;      
     font-size: px;      
     border-radius: px;      
}      
upload{      
     float: left;      
     position: relative;      
}      
upload_pic{      
     display: block;      
     width: %;      
     height: px;      
     position: absolute;      
     left: ;      
     top: ;      
     opacity: ;      
     border-radius: px;      
}

ログイン後にコピー

Javascript

getElementById を通じてノードを取得し、ブラウザーの互換性を判断します。FileReaderインターフェースをサポートしていないブラウザーの場合は、プロンプトが表示され、入力が無効になります。それ以外の場合は、変更イベントが発生します。入力は監視されます。

JavaScript Code复制内容到剪贴板
//获取上传按钮    
var input = document.getElementById("upload");       
if(typeof FileReader===&#39;undefined&#39;){       
     //result.innerHTML = "抱歉，你的浏览器不支持 FileReader";     
     input.setAttribute(&#39;disabled&#39;,&#39;disabled&#39;);       
}else{       
     input.addEventListener(&#39;change&#39;,readFile,false);       
}

ログイン後にコピー

そして、file_inputのchangeイベントがトリガーされたときに、関数readFile()を呼び出します。 readFile では、まずファイルオブジェクトを取得し、次にファイルの type 属性を通じてファイルタイプを検出します。もちろん、画像タイプのファイルの選択のみを許可し、次に FileReader インスタンスを new して呼び出します。 readAsDataURL メソッドで選択した画像ファイルを取得し、最後に onload イベントで正常に読み取られたファイルの内容を取得し、img ノードを挿入して選択した画像を表示します。

JavaScript Code复制内容到剪贴板
function readFile(){       
     var file = this.files[];       
     if(!/image\/\w+/.test(file.type)){       
         alert("文件必须为图片！");       
         return false;       
     }       
     var reader = new FileReader();       
     reader.readAsDataURL(file);       
     //当文件读取成功便可以调取上传的接口，想传哪里传哪里（PS： 你们可以把你们的靓照偷偷发给我！）    
     reader.onload = function(e){       
         var data = this.result.split(&#39;,&#39;);      
         var tp = (file.type == &#39;image/png&#39;)? &#39;png&#39;: &#39;jpg&#39;;      
         var a = data[];      
         //需要上传到服务器的在这里可以进行ajax请求    
         ... ...      
     }      
};

ログイン後にコピー

これで画像のアップロード機能は完成しました。ご興味がございましたら、ご自身で試してみてください。わからない場合や間違っていた場合は、ご連絡ください。 FileReader のメソッドとイベント

HTML5 による画像アップロード、モバイル端末と PC 端末の共通コード共有