Ajax画像アップロードとcut_PHPチュートリアル-PHPチュートリアル-php.cn

Ajax画像アップロードとcut_PHPチュートリアル

WBOY

リリース： 2016-07-13 17:07:05

オリジナル

954 人が閲覧しました

允许用户以AJAX的方式上传图片
·允许用户选择图片的一定区域
·最后，提供一个裁减后图片的下载地址

我们将要用到三个文件

·index.php - 包含图片上传表单以及剪切界面
·upload.php - 提供上传功能
·crop.php - 提供剪切功能

从技术角度看，流程如下所示：

1.用户上传文件(index.php)
2.index.php将上传的图片POST到upload.php以处理上传图片程序，返回JSON数据包括图片名，长和宽。
3.根据JSON里的数据和innerHTML，我们将图片放在页面上
4.初始化javascript剪切工具
5.生成下载连接(crop.php)

让我们来看看index.php

index.php是我们的主要文件，用户通过他来上传和下载图片。

我们需要YUI提供的以下几个组件：
·yahoo-dom-event.js - 操作和解析DOM
·dragdrop - 基于图片剪切工具
·element - 基于图片剪切工具
·resize - 基于图片剪切工具
·connection - 为AJAX请求, 此例通过AJAX上传
·json - 解析JSON
·imagecropper - 我们最重要的工具

当然我们要用到 Yahoo combo handling并且加上上面提到的脚本和样式表：[code] href="http://yui.yahooapis.com/2.5.2/build/resize/assets/skins/sam/resize.css"
/>
href="http://yui.yahooapis.com/2.5.2/build/imagecropper/assets/skins/sam/imagecropper.css"
/>

[/code]然后用户一定会通过AJAX上传图片，所以我们在页面上加一个表单。[code]

[/code]点击上传按钮来激活上传程序。[code]// add listeners
YAHOO.util.Event.on('uploadButton', 'click', uploader.carry);[/code]同样，我们也需要两个容器：
·imageContainer - 将包含我们上传的图片
·downloadLink - 将包含下载连接[code]

[/code]2 つのコンテナは後で innerHTML 経由で更新されます

AJAXアップロード
AJAX アップロードについては、Code Central のこのチュートリアルを参照してください

このチュートリアルを強くお勧めします。サンプルコードをダウンロードして、自分のニーズに合わせて少し変更しました。最後に、メソッドを 1 つだけ持つ非常に優れた JSON オブジェクト [アップローダー] を作成しました。後者は、指定された URL にフォームデータを送信するだけです。 [コード]アップローダー = {
キャリー: function(){
// フォームを設定します
YAHOO.util.Connect.setForm('uploadForm', true);
// 画像をアップロード
YAHOO.util.Connect.asyncRequest('POST', 'upload.php', {
アップロード: function(o){
// json データを解析します
var jsonData = YAHOO.lang.JSON.parse(o.responseText);

～

YAHOO.util.Dom.get('imageContainer').innerHTML = ' src="' + jsonData.image + '" width="' + jsonData.width + '" height="' +

jsonData.height + '" alt="" />';

//Photoshop
を開始します photoshop.init(jsonData.image);

// 最初にトリミングされた画像を取得します

photoshop.getCroppedImage();
});

}

};
[/code]アップロードが完了すると、前述の JSON データが取得されます。 [コード]{"画像" : "images/myimage.jpg"、"幅" : "500"、"高さ" : 400}
[/code]このデータと、画像を配置するために使用するコンテナ imageContainer は、id として yuiImg を使用します[code]YAHOO.util.Dom.get
('imageContainer').innerHTML = '';[/code]画像トリミングツールが適切に動作しない場合を除き、画像の長さと幅を指定することが非常に重要です。
次に、別の JSON オブジェクト Photoshop をインスタンス化します。見てみましょう。

Photoshop オブジェクト [code]photoshop = {
画像: null、
クロップ: null、

init: function(image){

// 画像を設定します
photoshop.image = 画像;

// アップロードされた画像からの画像クロッパー
                photoshop.crop = 新しい YAHOO.widget.ImageCropper('yuiImg');
                photoshop.crop.on('moveEvent', function() {
                        // 更新された座標を取得します
                        photoshop.getCroppedImage();
                });
        }、

getCroppedImage: function(){
var 座標 = photoshop.getCoowned();

var url = 'crop.php?image=' + photoshop.image +
'&cropStartX=' + 座標.left +'&cropStartY=' +
座標.トップ +'&cropWidth=' + 座標.幅
+'&cropHeight=' + 座標.高さ;

YAHOO.util.Dom.get('downloadLink').innerHTML = 'トリミングされた画像をダウンロード';

[/code]index.php のすべての内容はここにあります。
upload.php[コード]
if ($ext == "jpg") {

// 一意のファイル名を生成します

$newName = 'images/'.time().'.'.$ext;

// ファイルをアップロードします
if ((move_uploaded_file($_FILES['uploadImage']['tmp_name'], $newName))) {

// アップロードされた画像の高さと幅を取得します
list($width, $height) = getimagesize($newName);

️ // json データを返す

echo '{"image" : "'.$newName.'", "height" : "'.$height.'", "width" : "'.$width.'" }';
}
else {
echo '{"error" : "ファイルの移動中にエラーが発生しました"}';
}
}
その他 {
echo '{"エラー" : "無効な画像形式"}';
}
}
[/code]upload.php は、その記述どおり、jpg 形式の画像のみを解析し、次に一意のファイル名を生成して画像フォルダーに配置し、最後に DOM 操作可能な JSON データを生成します。もちろん、画像フォルダーは読み取りおよび書き込み可能に設定されている必要があります。

crop.php[code]//変数を取得する

$imgfile = $_GET['画像'];
$cropStartX = $_GET['cropStartX'];
$cropStartY = $_GET['cropStartY'];
$cropW = $_GET['cropWidth'];
$cropH = $_GET['cropHeight'];

// 2 つの画像を作成します

$origimg = imagecreatefromjpeg($imgfile);
$cropimg = imagecreatetruecolor($cropW,$cropH);

//元のサイズを取得します

list($width, $height) = getimagesize($imgfile);

//作物

imagecopyresize($cropimg, $origimg, 0, 0, $cropStartX, $cropStartY, $width, $height, $width, $height);

//NES イメージを強制的にダウンロードします

header("コンテンツタイプ: image/jpeg");
header('Content-Disposition:attachment; filename="'.$imgfile.'"');
imagejpeg($cropimg);

//画像を破棄します

imagedestroy($cropimg);
imagedestroy($origimg);
[/code]アップロードされた画像は Crop.php を通じて切り取ることができます。まず、AJAX 経由で渡されたすべての変数を取得します。 [コード]//変数を取得します
$imgfile = $_GET['画像'];
$cropStartX = $_GET['cropStartX'];
$cropStartY = $_GET['cropStartY'];
$cropW = $_GET['cropWidth'];
$cropH = $_GET['cropHeight'];
[/code]オリジナル画像とカット画像の2つの画像を作成し、imagecopyresizeメソッドを使用してカット画像を生成します。 2 つのヘッダー情報を追加します。1 つはブラウザーにこれが画像であることを伝え、もう 1 つは画像を保存するためのダイアログボックスです。

を含みます。