ホームページ >ウェブフロントエンド >H5 チュートリアル >html5+phpでファイルドラッグ&アップロード機能を実装する方法

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

巴扎黑
巴扎黑オリジナル
2017-03-19 14:05:421655ブラウズ

【はじめに】この記事では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 = 'html5+phpでファイルドラッグ&アップロード機能を実装する方法';

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。