【はじめに】この記事ではHTML5でファイルアップロードを実装する機能を紹介します。必要な学生は参考にしてください。インターフェースのスタイルは海外の写真アルバムサイトを参考にしていますが、あまり変更はなく、鳥のさえずりを中国語に変換してアップロードする際のスタイルを変更しただけです
この記事では、ファイルの実装を紹介します。 HTML5 アップロード機能の導入が必要な学生は参考にしてください。
インターフェースのスタイルは海外の写真集のサイトを参考にしましたが、鳥の鳴き声を中国語に変換してアップロードする際のスタイルを変更しただけです。拡張機能として、画像を追加する 3 つの方法をサポートしています。1 つはドラッグ アンド ドロップでアップロードする方法、1 つはファイルを通常選択してアップロードする方法、もう 1 つはネットワーク画像を追加する方法です。 3 つのアップロード モードが巧みに統合されており、HTML5 をサポートしていない場合は、画像をアップロードするためのドラッグ アンド ドロップのプロンプトは表示されません。
最高のドラッグです。重要なのは、関数の 70% を実装する js 部分のコードです。残りの 30% は、画像情報をバックグラウンドに送信し、圧縮やトリミングなどの対応する処理を実行するだけです。 。それでは、まず js の実装コードを見てみましょう。
| 代码如下 | 复制代 |
|
なし标题文档 <script><br/>$().ready(function(){<br/> if($.ブラウザ.サファリ || $.browser.mozilla){<br/> $('#dtb-msg1 .compatibility').show();<br/> $('#dtb-msg1 .notcompatibility').hide();<br/> $('#drop_zone_home')。 hover(function(){<br/> $(this).children('p').stop().animate({top:'0px'},200);<br/> },function(){<br/> $(this).children ('p').stop().animate({top:'-44px'},200);<br/> });<br/> //功能实现<br/> $(document).on({<br/> dragleave:function(e){ <br/> e.preventDefault();<br/> $('.dashboard_target_box').removeClass('over');<br/> },<br/> drop:function(e){<br/> e.preventDefault();<br/> //$('.dashboard_target_box' ).removeClass('over');<br/> },<br/> dragenter:function(e){<br/> e.preventDefault();<br/> $('.dashboard_target_box').addClass('over');<br/> },<br/> dragover:function (e){<br/> e.preventDefault();<br/> $('.dashboard_target_box').addClass('over');<br/> }<br/> });<br/> var box = document.getElementById('target_box');<br/> box.addEventListener ("drop",function(e){<br/> e.preventDefault();<br/> //获取文件列表<br/> var fileList = e.dataTransfer.files;<br/> var img = document.createElement('img');<br/> //检测拖拽文件が页面の操作であるかどうか<br/> if(fileList.length == 0){<br/> $('.dashboard_target_box').removeClass('over');<br/> return;<br/> }<br/> //检拽文件は不是图片<br/> if(fileList[0].type.indexOf('html5+phpでファイルドラッグ＆アップロード機能を実装する方法') === -1){<br/> $('.dashboard_target_box').removeClass('over');<br/> return;<br/> }<br/> <br/> if($.browser .safari){<br/> //Chrome8+<br/> img.src = window.webkitURL.createObjectURL(fileList[0]);<br/> }else if($.browser.mozilla){<br/> //FF4+<br/> img.src = window.URL。 createObjectURL(fileList[0]);<br/> }else{<br/> //实例化ファイルリーダー对象<br/> var Reader = new FileReader();<br/> reader.onload = function(e){<br/> img.src = this.result;<br/> $ (document.body).appendChild(img);<br/> }<br/> reader.readAsDataURL(fileList[0]);<br/> }<br/> var xhr = new XMLHttpRequest();<br/> xhr.open("post", "test.php", true);<br/> xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");<br/> xhr.upload.addEventListener("進捗", function(e){<br/> $("#dtb-msg3").hide( );<br/> $("#dtb-msg4 span").show();<br/> $("#dtb-msg4").children('span').eq(1).css({width:'0px'});<br/> $('.show').html('');<br/> if(e.lengthComputable){<br/> varloaded = Math.ceil((e.loaded / e.total) * 100);<br/> $("#dtb- msg4").children('span').eq(1).css({width:(loaded*2)+'px'});<br/> }<br/> }, false);<br/> xhr.addEventListener("load", function(e){<br/> $('.dashboard_target_box').removeClass('over');<br/> $("#dtb-msg3").show();<br/> $("#dtb-msg4 スパン").hide( );<br/> var result = jQuery.parseJSON(e.target.responseText);<br/> alert(result.filename);<br/> $('.show').append(result.img);<br/> }, false);<br/> <br/> var fd = new FormData();<br/> fd.append('xfile', fileList[0]);<br/> xhr.send(fd);<br/> },false);<br/> }else{<br/> $('#dtb-msg1 .compatibility) ').hide();<br/> $('#dtb-msg1 .notcompatibility').show();<br/> }<br/>});<br/></script> | |
test.php ファイル
| 代码如下 | 复制代 |
$r = new stdClass(); | |
以上がhtml5+phpでファイルドラッグ＆アップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
