html5 ドラッグ アンド ドロップ アップロード画像の例 デモンストレーション_html5 チュートリアル スキル

タイトルはサンプルなので今回は説明しません。このサンプルは、ドラッグ＆ドロップでアップロードしたプラグインとデモを5、6個ほど参考にして、その中から一番良いものを入れて作ったものです。 . 場所が選ばれ、最終的にはこのような例になりました。一緒に見てみましょう（アドレスが長期間有効であることは保証できません。無効な場合は、最後にあるデモのダウンロードをクリックしてください。）この記事):

私は、外国の写真アルバムのウェブサイトのインターフェースのスタイルを参照しています。鳥のさえずりを中国語に変換し、アップロードする際のスタイルを変更しただけです。これを選択したのは、拡張が簡単であるという理由からです。1 つはドラッグ アンド ドロップでアップロードする方法、1 つは通常のファイルを選択してアップロードする方法、もう 1 つはネットワーク写真を追加する方法です。 3 つのアップロード モードが巧みに統合されており、HTML5 をサポートしていない場合は、html5 ドラッグ アンド ドロップ アップロード画像の例 デモンストレーション_html5 チュートリアル スキルをアップロードするためのプロンプトは表示されません。

。ドラッグ アンド ドロップ アップロードの最も重要な部分はコードの js 部分で、関数の 70% を実装します。残りの 30% はhtml5 ドラッグ アンド ドロップ アップロード画像の例 デモンストレーション_html5 チュートリアル スキル情報をバックグラウンドに送信し、圧縮などの対応する処理を実行するだけです。 、トリミングなど。それでは、まず js の実装コードを見てみましょう。

コードをコピー

コードは次のとおりです:

$().ready( function() {
if($.browser.safari || $.browser.mozilla){
$('#dtb-msg1 .compatibility').show(); -msg1 .互換性がありません').hide();
$('#drop_zone_home').hover(function(){
$(this).children('p').stop().animate({ top:' 0px'},200);
},function(){
$(this).children('p').stop().animate({top:'-44px'},200 );
});
//関数の実装
$(document).on({
dragleave:function(e){
e.preventDefault();
$( '.dashboard_target_box ').removeClass('over');
},
drop:function(e){
e.preventDefault();
//$('.dashboard_target_box')。 RemoveClass('over');
dragenter:function(e){
e.preventDefault();
$('.dashboard_target_box').addClass('over'); 🎜>} 、
dragover:function(e){
e.preventDefault();
$('.dashboard_target_box').addClass('over'); ;
var box = document.getElementById('target_box');
box.addEventListener("drop",function(e){
e.preventDefault();
// ファイルリストを取得する
var fileList = e.dataTransfer.files;
var img = document.createElement('img');
//ページへのファイルのドラッグ操作であるかどうかを検出します
if(fileList) .length == 0) {
$('.dashboard_target_box').removeClass('over');
return;
}
// ファイルがhtml5 ドラッグ アンド ドロップ アップロード画像の例 デモンストレーション_html5 チュートリアル スキルであるかどうかを検出します
if (fileList[0].type.indexOf('image') === -1){
$('.dashboard_target_box').removeClass('over');
return; >if($.browser.safari ){
//Chrome8
img.src = window.webkitURL.createObjectURL(fileList[0])
}else if($.browser.mozilla); 🎜>//FF4
img.src = window.URL.createObjectURL(fileList[0]);
}else{
//ファイル リーダー オブジェクトをインスタンス化します
var Reader = new FileReader() ;
reader.onload = function(e){
img.src = this.result;
$(document.body).appendChild(img);
reader.readAsDataURL( fileList[0]);
}
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true); -Requested-With", "XMLHttpRequest ");
xhr.upload.addEventListener("progress", function(e){
$("#dtb-msg3").hide();
$ ("#dtb-msg4 スパン" ).show();
$("#dtb-msg4").children('span').eq(1).css({width:'0px'});
$('.show ').html('');
if(e.lengthComputable){
varloaded = Math.ceil((e.loaded / e.total) * 100);
$("#dtb -msg4").children('span').eq(1).css({width:(loaded*2) 'px'});
}
}, false);
xhr.addEventListener("load", function(e){
$('.dashboard_target_box').removeClass('over');
$("#dtb-msg3"). show();
$ ("#dtb-msg4 span").hide();
var result = jQuery.parseJSON(e.target.responseText);
alert(result.filename); 🎜>$('.show' ).append(result.img);
}, false);
var fd = new FormData();
fd.append('xfile', fileList ]);
send(fd);
}else{
$('#dtb-msg1 .compatibility'); ('#dtb-msg1 .notcompatibility ').show()
}
});
先ほども述べたように、ブラウザごとに表示されるインターフェースが異なるため、最初にブラウザの種類を決定しました。主な実装コードは「関数の実装」から始まります。なぜこの操作が行われるのか、原理は何なのかについては詳しく説明しません。「Renren でのドラッグ アンド ドロップ アップロードの詳細な説明」を参照してください。ホームページ (HTML5 Drag&Drop , FileReader API, formdata)」を作成しましたが、ajax アップロード部分のコードがまだ少し違っていて、Renren のものは少し面倒そうなので、別の方法を探しました。
最後の部分は PHP コードをアップロードすることです。ここでは参照を提供するだけです。プロジェクトのニーズに応じて自分で記述できます。

コードをコピーします

コードは次のとおりです。

$r = new stdClass( );
header('content-type: application/json');
$maxsize = 10; //Mb
if($_FILES['xfile']['size'] > ($ maxsize * 1048576 )){
$r->error = "html5 ドラッグ アンド ドロップ アップロード画像の例 デモンストレーション_html5 チュートリアル スキルサイズが $maxsize MB を超えていません";
$folder = 'files/'; ($フォルダー)) {
mkdir($フォルダー);
$フォルダー .= $_POST['フォルダー'] : ''; 🎜>if(! is_dir($folder)){
mkdir($folder);
}
if(preg_match('/image/i', $_FILES['xfile']['type' ])){
$filename = $_POST['value'] ? $_POST['value'] : $folder(@microtime() . '-' . $_FILES['xfile']['name ']) . ' .jpg';
}else{
$tld = split(',', $_FILES['xfile']['name']); count($tld) - 1];
$filename = $_POST['value'] : $folder(@microtime() . '-' . $_FILES['xfile] ']['名前 ']) . $tld;
}
$types = Array('image/png', 'image/gif', 'image/jpeg'); $_FILES['xfile ']['type'], $types)){
$source = file_get_contents($_FILES["xfile"]["tmp_name"]);
imageresize($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->;ファイル名 = $ファイル名;
$r->パス = $パス;
$r->img = '';
echo json_encode($r);
関数 imageresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
$quality = $quality ? $quality : 80;
$image = imagecreatefromstring($source);
if ($image) {
// 寸法を取得します
$w = imagex($image );
$h = imagey($image);
if (($width && $w > $width) || ($height && $h > $height)) {
$ratio = $w / $ h;
if (($ratio >= 1 || $height == 0) && $width && !$crop) {
$new_height = $width / $ratio; >$new_width = $width;
} elseif ($crop && $ratio $new_height = $width / $ratio
$new_width = $width; ;
} else {
$new_width = $height;
}
} else {
$new_width = $w; $new_height = $h ;
}
$x_mid = $new_width * .5; //水平中央
$y_mid = $new_height * .5; // 再サンプル
error_log('height : ' . $new_height . ' - width: ' . $new_width);
$new = imagecreatetruecolor(round($new_width),round($new_height)); $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
// トリミング
if ($crop) {
$crop = imagecreatetruecolor($width ? $width : $new_width , $height ? $height : $new_height);
imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $ height, $width, $height);
//($y_mid - ($height * .5))
}
// 出力
// インターランシングを有効にする [プログレッシブ JPEG の場合]
imageinterlace($crop ? $crop : $new, true);
$dext = strto lower(pathinfo($destination, PATHINFO_EXTENSION));
if ($dext == '') {
$dext = $ext;
$destination .= '.ext;
switch ($dext) {
case 'jpeg':
case 'jpg' imagejpeg($crop ? $crop : $new, $destination, $quality);
break;
case 'png':
$pngQuality = ($quality - 100) /
$ pngQuality =round(abs ($pngQuality));
imagepng($crop ? $crop : $new, $destination, $pngQuality);
case 'gif':
imagegif( $crop : $new, $destination);
@imagedestroy($new); );
}
}


PHP は最終的に JSON 形式の配列を返します。返された情報は、html5 ドラッグ アンド ドロップ アップロード画像の例 デモンストレーション_html5 チュートリアル スキルのアドレス、名前、および img の HTML コードです。この時点で、json 配列が取得され、処理されます。終わりました。
記事の冒頭で述べたように、クリックして選択するファイルのアップロードやネットワークhtml5 ドラッグ アンド ドロップ アップロード画像の例 デモンストレーション_html5 チュートリアル スキルもありますが、これら 2 つはこのトピックの範囲外であるため、説明しません。さらに、これら 2 つの機能は実装が面倒ではありません。
デモのダウンロード