html5+phpでファイルドラッグ＆アップロード機能を実装する方法

【はじめに】この記事では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(); header('content-type: application/json'); $maxsize = 10; //Mb if($_FILES['xfile']['size'] > ($maxsize * 1048576)){ $r->error = "图片大小">gt;图片大小超不过 $maxsize MB" ; } $folder = 'files/'; if(!is_dir($folder)){ mkdir($folder); } $folder .= $_POST['folder'] $_POST['folder] ? '] . '/' : ''; if(!is_dir($folder)){ mkdir($folder); } if(preg_match('/html5+phpでファイルドラッグ＆アップロード機能を実装する方法/i', $_FILES['xfile'] ['type'])){ $filename = $_POST['value'] ? $_POST['value'] : $folder(@microtime() . '-' . $_FILES['xfile'][ 'name']) . '.jpg'; }else{ $tld = split(',', $_FILES['xfile']['name']); $tld = $tld[count($tld) ) - 1]; $filename = $_POST['value'] ? $_POST['value'] : $folder(@microtime() . '-' . $_FILES['xfile']['name' ]) . $tld; } $types = Array('html5+phpでファイルドラッグ＆アップロード機能を実装する方法/png', 'html5+phpでファイルドラッグ＆アップロード機能を実装する方法/gif', 'html5+phpでファイルドラッグ＆アップロード機能を実装する方法/jpeg'); if(in_array($_FILES['xfile']['type' ], $types)){ $source = file_get_contents($_FILES["xfile"]["tmp_name"]); html5+phpでファイルドラッグ＆アップロード機能を実装する方法resize($source, $filename, $_POST['width'], $_POST['height' ], $_POST['crop'], $_POST['quality']); }else{ move_uploaded_file($_FILES["xfile"]["tmp_name"], $filename); } $path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']); $r->filename = $filename; $r->path = $path; $r->img = ''; echo json_encode($r); function html5+phpでファイルドラッグ＆アップロード機能を実装する方法resize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) { $quality = $quality ? $quality : 80; $html5+phpでファイルドラッグ＆アップロード機能を実装する方法 = html5+phpでファイルドラッグ＆アップロード機能を実装する方法createfromstring($source); if ($html5+phpでファイルドラッグ＆アップロード機能を実装する方法) { // 寸法を取得します $w = html5+phpでファイルドラッグ＆アップロード機能を実装する方法x($html5+phpでファイルドラッグ＆アップロード機能を実装する方法); $h = html5+phpでファイルドラッグ＆アップロード機能を実装する方法y($html5+phpでファイルドラッグ＆アップロード機能を実装する方法); if (($width && $w > $width) || ($height && $h > $height)) { $ratio = $w / $h; if (( $ ratio＆gt; = 1 ||。$ height == 0） ;= ($width / $height)) { $new_height = $width / $ratio; $new_width = $width; } else { $new_width = $height * $ratio ; $new_height = $height; } } else { $new_width = $w; $new_height = $h; } $x_mid = $new_width * .5;  //横真ん中          $y_mid = $new_height * .5; // verticalmiddle //resample error_log（ 'height：'。$ new_height。 ' - width：'。$ new_width）; ($new, $html5+phpでファイルドラッグ＆アップロード機能を実装する方法, 0, 0, 0, 0, $new_width, $new_height, $w, $h); // Crop if ($crop) { $crop = html5+phpでファイルドラッグ＆アップロード機能を実装する方法createtruecolor($width ? $width : $new_width, $height ? $height : $new_height); html5+phpでファイルドラッグ＆アップロード機能を実装する方法copyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width , $height); //($y_mid - ($height * .5)) } // Output // インターランシングを有効にする（プログレッシブ JPEG の場合） html5+phpでファイルドラッグ＆アップロード機能を実装する方法interlace($crop ? $crop : $new, true ) ; $dext = strto lower(pathinfo($destination, PATHINFO_EXTENSION)); if ($dext == '') { $dext = $ext; $destination .= '。 ' 。 $ext; } switch ($dext) { case 'jpeg': case 'jpg': html5+phpでファイルドラッグ＆アップロード機能を実装する方法jpeg($crop ? $crop : $new, 、$quality); ブレーク; case 'png ': $pngQuality = ($quality - 100) / 11.111111; $pngQuality =round(abs($pngQuality)); html5+phpでファイルドラッグ＆アップロード機能を実装する方法png($crop ? $crop : $new,宛先、$pngQuality); ブレーク; case 'gif': html5+phpでファイルドラッグ＆アップロード機能を実装する方法gif($crop ? $crop : $new, $destination); Break; } @html5+phpでファイルドラッグ＆アップロード機能を実装する方法destroy($html5+phpでファイルドラッグ＆アップロード機能を実装する方法); @html5+phpでファイルドラッグ＆アップロード機能を実装する方法destroy($new); @html5+phpでファイルドラッグ＆アップロード機能を実装する方法destroy($crop) ; } } ?>

以上がhtml5+phpでファイルドラッグ＆アップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。