時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

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

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

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

    echo $imageName;