ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 で複数画像アップロード機能を実装_html5 チュートリアル スキル

HTML5 で複数画像アップロード機能を実装_html5 チュートリアル スキル

WBOY
リリース: 2016-05-16 15:45:35
オリジナル
2672 人が閲覧しました

以前に画像のアップロードについて書きましたが、最近、複数のアップロードが必要なビジネス要件があったので、書き直しました。

HTML 構造:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div クラス="コンテナ" >
  2. <ラベル>画像ファイルを選択してください: ラベル>
  3. <入力 type="file" id="file_input" 複数/>
  4. div>

ところで、このアップロードの主なロジックについて話しましょう:

・input タグを使用して、type=file を選択してください。複数の画像を選択することを忘れないでください。そうしないと、単一の画像しか選択できません。

・入力の変更時刻をバインドします、

・重要な点は、この変更イベントをどのように処理するかです。H5 の新しい FileReader インターフェースを使用してファイルを読み取り、base64 にエンコードします。次に、バックエンドのクラスメートと対話します。

JS コード:

JavaScript コードコンテンツをクリップボードにコピーします
  1. window.onload = function(){   
  2.         var input = document.getElementById("file_input");   
  3.         var result,div;   
  4.     
  5.         if(typeof FileReader==='undefined'){   
  6.             result.innerHTML = "抱歉,你的浏览器不支持 FileReader";   
  7.             input.setAttribute('disabled','disabled');   
  8.         }else{   
  9.             input.addEventListener('change',readFile,false);   
  10.         }
         
    //handler   
  11.         function readFile(){   
  12.             for(var i=0;i<this.files.length;i++){   
  13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){  //判断上传文件格式   
  14.                     return alert("上传的图片格式不正确,请重新选择")
              }   
  15.                 var reader = new FileReader();   
  16.                 reader.readAsDataURL(this.files[i]);   
  17.                 reader.onload = function(e){   
  18.                     result = '
    this.result+'" alt=""/>
    '
  19. ;
  20. div = document.createElement('div');
  21. div.innerHTML = 結果;
  22. document.getElementById(
  23. 'body'
  24. ).appendChild(div) // dom ツリーを挿入
    }
  25. }
  26. 複数の写真をアップロードする方法は 0.0 ですか?
  27. ただし、これは画像を Base64 エンコードに変換してフロントエンドに表示するだけです。
  28. 画像を挿入した後、開発者ツールを開き、HTML 構造が次のようになっていることを確認します

現実的なアプローチは、処理関数でファイル キュー内のファイルをバックエンドに送信し、バックエンド スチューデントが MD5 暗号化ファイルとそのファイルに対応するパスをフロント エンドに返し、フロント エンドがこのパスを使用することです。そしてそれを上位のページにレンダリングします。

その後、MD5 ファイルはバックエンドに返送されます。通常、フロントエンドはアップロード後に写真を削除するため、返送の目的は、それらの写真が必要なものであることをバックエンドに確認するように指示することであり、バックエンドは保存します。それらをデータベースに保存します。

jquery の操作方法を教えてください

JavaScript コード

コンテンツをクリップボードにコピーします

  1. 関数 readFile(){
  2. var fd = new FormData();   
  3. for(var i=0;i<this.files.length;i ){
  4. var reader = new FileReader();   
  5. reader.readAsDataURL(this.files[i]);   
  6. fd.append(i,this.files[i]);
              }
  7. $.ajax({
  8. url : ''
  9. type : '投稿'
  10. データ : fd,
  11. 成功 : 関数(データ){
  12. console.log(データ)
  13. }
  14. })
  15. }

FormData も H5 の新しいインターフェイスであり、表個別のコントロールのハンド渡しを模倣するために使用され、最大の優れた点は、二重化されたファイルをハンドリングできることです

その後成功した回调里面我们拿念要的データを回った後、写真を移動して页面啦、同様の以前の行為を行うことができます~

上个效果图:

以上が本書のすべての内容であり、広く学術的に役立つことが期待されます。

翻訳:

http://www.cnblogs.com/weapon-x/p/5237064.html

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート