モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても問題ありません。ただし、モバイル端末でさまざまな冗長プラグインがまだ使用されている場合は、批判される可能性があります。プロジェクトには、写真をアップロードする機能が必要です。H5 にはすでに関連するインターフェイスがあり、互換性も優れているため、もちろん H5 に優先的に実装されます。

使用される主なテクノロジーは次のとおりです。

アヤックス

ファイルリーダー

フォームデータ

HTML構造:

XML/HTML コードコンテンツをクリップボードにコピー

< div クラス= "カメラ領域" >
<フォーム enctype = "マルチパート/フォームデータ" メソッド= "投稿" >
<入力タイプ= "ファイル" 名前= "アップロードするファイル" クラス= "fileToUpload" accept = "画像/*" キャプチャ= "カメラ" />
< div クラス= "アップロード進行状況" > < span > </ span > </ div >
</フォーム>
< div クラス= "thumb" > </ div >
</div>

パッケージ化されたupload.jsはzeptoに依存します

JavaScriptコードコンテンツをクリップボードにコピー

(関数($) {
$.extend($.fn, {
fileUpload:関数(opts) {
この.each(関数(){
var $self = $( this );
var DOM = {
"アップロードするファイル" : $self.find( ".アップロードするファイル" ),
"親指" : $self.find( ".親指" ),
「進捗状況」 : $self.find( ".upload-progress" )
};
var funs = {
// ファイルを選択し、ファイルサイズを取得します。ここでファイル形式を取得して、ユーザーが必須でない形式でファイルをアップロードできないように制限することもできます。
"fileSelected" :関数() {
varファイル = (doms.fileToUpload)[0].files;
var count = ファイル数.長さ;
( var index = 0; index < count; index++) {
varファイル = ファイル[インデックス];
varファイルサイズ = 0;
ファイルサイズが 1024 * 1024 より大きい場合
ファイルサイズ = (Math.round(ファイルサイズ * 100 / (1024 * 1024)) / 100).toString() + 'MB' ;
それ以外
ファイルサイズ = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB' ;
}
funs.uploadFile();
},
// ファイルを非同期でアップロードする
アップロードファイル:関数() {
var fd = new FormData(); //フォームデータオブジェクトを作成する
varファイル = (doms.fileToUpload)[0].files;
var count = ファイル数.長さ;
( var index = 0; index < count; index++) {
varファイル = ファイル[インデックス];
fd.append(opts.file, file); //フォームデータにファイルを追加する
funs.previewImage(file); //アップロードする前に画像をプレビューします。他の方法でtxtファイルをプレビューすることもできます。
}
var xhr =新しいXMLHttpRequest();
xhr.upload.addEventListener( "progress" , funs.uploadProgress, false ); //アップロードの進行状況を監視する
xhr.addEventListener( "load" 、 funs.uploadComplete 、 false );
xhr.addEventListener( "エラー" 、 opts.uploadFailed、 false );
xhr.open( "POST" 、opts.url);
xhr.send(fd);
},
//ファイルプレビュー
previewImage:関数(ファイル) {
varギャラリー = doms.thumb;
var img = document.createElement( "img" );
img.file = ファイル;
画像サイズ
// FileReaderメソッドを使用して画像コンテンツを表示します
varリーダー =新しいFileReader();
reader.onload = (関数(aImg) {
戻る関数(e) {
aImg.src = e.target.result;
};
})(画像);
reader.readAsDataURL(ファイル);
},
アップロード進捗状況:関数(evt) {
（evt.lengthComputable）の場合{
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
doms.progress.html(パーセント完了.toString() + '%' );
}
},
「アップロード完了」 :関数(evt) {
アラート(evt.target.responseText)
}
};
doms.fileToUpload.on( "変更" 、関数() {
doms.progress.find( "span" ).width( "0" );
funs.fileSelected();
});
});
}
});
})(ゼプト);

呼び出し方法:

JavaScriptコードコンテンツをクリップボードにコピー

$( ".camera-area" ).fileUpload({
「url」 : 「savetofile.php」、
"ファイル" : "myFile"
});

PHP部分:

PHPコードコンテンツをクリップボードにコピー

<?php
if (isset( $_FILES [ 'myFile' ])) {
// 例：
ログを書き込みます( $_FILES );
move_uploaded_file( $_FILES [ 'myFile' ][ 'tmp_name' ], "uploads/" . $_FILES [ 'myFile' ][ 'name' ]);
エコー '成功' ;
}
関数writeLog( $log ){
if ( is_array ( $log ) || is_object ( $log )){
$log = json_encode( $log );
}
$log = $log . "\r\n" ;
file_put_contents ( 'log.log' 、 $log 、 FILE_APPEND );
}
?>