input type="file"のデータを javascriptで取得し、データをphpに渡しアップロード保存

とあるページにinput type="file"で取得したデータはjavascriptで処理できません(データをいじれません)

って書いてた。

まぁ、とあるページってのがYahoo!! 知恵袋なんですけどね。

そんなことあるかい！ってことでちょっくら調べて作ってみました。

今回紹介するソースコードは

<input type="file" />

で、指定するファイルは「画像」として話記述しています。

しかし、今回のソースを少し変えることで他のファイルでも可能です。

画像で手間取ったのがbase64というもの

base64形式で表したものらしい。

よくわからないのでそのあたりの処理はphp側にまかせました。

いつものことながらjQuery使用してます

html

<input id="file-image" type="file" />

javascript

jQueryの$.ajax使用してます

「//ここ({」は「$.ajax({」に置き換えてください。(はてなブログのキーワードのやつでさ・・・)

//指定要素が変更された時
$('#file-image').change(function(e){
    var img = new Image();
	var reader = new FileReader();
	var file = this.files[0];
    
	if (!file.type.match(/^image\/(bmp|png|jpeg|gif)$/)){
		alert("対応画像ファイル[bmp|png|jpeg|gif]");
		return;
	}
    
	reader.onload = function(event){
		img.onload = function(){
			var data = {data:img.src.split(',')[1]};
			//ここ({
				type: 'POST',
				url: './add-image.php',
				data: data,
				success: function(data, dataType){
					if(data == 'OK'){
						alert("アップロード出来ました！");
					}
				}
			});
		};
		img.src = event.target.result;
	};
    
	reader.readAsDataURL(file);
});

php

「べべ６４」は「base64」に置き換えて下さい

    $data = $_POST["data"];
    //ここに画像ファイルを判定するように何か入れて名前を決めた方がいい
    //今回はjpegのみ
    $imageName = "new.jpg";
    $fp = fopen($imageName, "w");
    fwrite($fp, べべ６４_decode($data));
    fclose($fp);

    echo $imageName;