コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > モバイル端末HTML5でファイルアップロード_HTML/Xhtml_Webページ制作を実現

モバイル端末HTML5でファイルアップロード_HTML/Xhtml_Webページ制作を実現

WBOY
リリース： 2016-05-16 16:36:06
オリジナル
1362 人が閲覧しました

PC 側でアップロードされるほとんどのファイルは、Flash を導入しても問題ありません。ただし、モバイル側でさまざまな冗長なプラグインが使用されている場合、プロジェクトは無駄になる可能性があります。 H5 には既に関連するインターフェイスが備わっているため、画像をアップロードする機能を持たせる必要があります。当然、実装には H5 を使用することが優先されます。

使用される主なテクノロジーは次のとおりです:

ajax

ファイルリーダー

フォームデータ

HTML 構造:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div class="カメラエリア">
  2. <form enctype="multipart/フォームデータ" メソッド="post">
  3. <入力 type="file" 名前="fileToUpload" クラス="fileToUpload" accept="image/*" キャプチャ="カメラ"/>
  4. <div class="upload-進捗"><スパン>スパン>div>
  5. フォーム>
  6. <div class="親指" >div>
  7. div>

パッケージ化されたupload.jsはzeptoに依存します

JavaScript コードコンテンツをクリップボードにコピーします
  1. (関数($) {
  2. $.extend($.fn, {
  3. fileUpload: 関数(opts) {
  4. this.each(function() {
  5. var $self = $(this);   
  6. var doms = {
  7. "fileToUpload": $self.find(".fileToUpload"),
  8. "thumb": $self.find(".thumb"),
  9. "progress": $self.find(".upload-progress")
  10. };   
  11. var 楽しい = {
  12. //选择文件、获取文件大小、这里获取文件格式、制限用户上传非要求格式的文件
  13. "fileSelected": 関数() {
  14. var files = (doms.fileToUpload)[0].files;   
  15. var count = files.length;   
  16. for (var index = 0; index < count; index ) {
  17. var file = files[index];   
  18. var fileSize = 0;   
  19. if (file.size > 1024 * 1024)
  20. fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() 'MB';   
  21. else
  22. fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() 'KB';   
  23. }
  24. funs.uploadFile();
  25. }、
  26. //ファイルを非同期でアップロードします
  27. UploadFile: function() {
  28. var fd = new FormData();//フォーム データ オブジェクトを作成
  29. var files = (doms.fileToUpload)[0].files;
  30. var count = files.length;
    31. for
  31. (var インデックス = 0; インデックス < カウント; インデックス ) {
    32. var
  32. ファイル = ファイル[インデックス]; fd.append(opts.file, file);//フォームデータにファイルを追加
  33. funs.previewImage(file);//アップロードする前に画像をプレビューするか、他の方法でテキストをプレビューします
    35. var
  35. xhr =
    36. new
  36. XMLHttpRequest(); xhr.upload.addEventListener("進行状況", funs.uploadProgress, false
    37. );
  37. // アップロードの進行状況を監視します xhr.addEventListener("load", funs.uploadComplete, false
    38. ); >
  38. xhr.addEventListener("error", opts.uploadFailed, false); >
    39. xhr.open(
  39. "POST", opts.url); xhr.send(fd) }、
  40. //ファイルプレビュー
  41. プレビューイメージ: 関数(ファイル) {
  42. var ギャラリー = doms.thumb;
  43. var img = document.createElement("img"); img.file = ファイル
  44. doms.thumb.html(img);
    46. //FileReader メソッドを使用して画像コンテンツを表示します
    47. var
  47. Reader = new FileReader(); Reader.onload = (function
    48. (aImg) {
  48. return
  49. 関数(e) { aImg.src = e.target.result;
  50. })(img);
    51. Reader.readAsDataURL(ファイル)
    52. }、
    53. UploadProgress:
  53. 関数
    54. (evt) {
  55. if (evt.lengthComputable) {
  56. varpercentComplete = Math.round(evt.loaded * 100 / evt.total); doms.progress.html(percentComplete.toString()
    57. '%'
  57. ); }、
  58. "uploadComplete":
    59. 関数
  59. (evt) {
  60. アラート(evt.target.responseText)
  61. };
  62. doms.fileToUpload.on("変更", function() {
  63. doms.progress.find("スパン").width("0"); >
  64. funs.fileSelected();
  65. });
  66. });
  67. }
  68. });
  69. })(ゼプト) ;
呼び出し方法:

JavaScript コードコンテンツをクリップボードにコピーします
  1. $(".カメラエリア").fileUpload({
  2. "url": "savetofile.php",
  3. "ファイル": "myFile"
  4. });
PHP 部分:


PHP コードコンテンツをクリップボードにコピーします
  2. if (isset($_FILES['myFile'])) {
  3. // 例:
  4. writeLog($_FILES); move_uploaded_file(
  5. $_FILES['myFile']['tmp_name']、"uploads/" . $_FILES['myFile']['名前']); エコー
  6. '成功しました'; }
  7. function writeLog(
  8. $log){ if(
  9. is_array($log) | | is_object($log)){ $log = json_encode(
  10. $log); } $log
  11. = $log
  12. ."rn"; file_put_contents
  13. ('log.log'
  14. , $log,FILE_APPEND); } ?>

  15. 以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

    原文: http://www.cnblogs.com/hutuzhu/p/5254532.html
関連ラベル：
html5 アップロード ファイルのアップロード
ソース：php.cn
前の記事：知っておきたいHTML最適化スキル_HTML/Xhtml_Webページ制作 次の記事：HTMLコードの書き方提案まとめ_HTML/Xhtml_Webページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート