AJAX PHP 更新なしの画像アップロードのサンプル コード_PHP チュートリアル

以前は、ユーザーがページを更新せずに動的に画像をアップロードできるように、ファイルのアップロードを実装するために ajax + php を使用していました。これにより、ユーザー エクスペリエンスが向上しました。当時、最も一般的に使用されていた方法は、iframe を使用して操作することでした。 . 実際のajax画像アップロード例を紹介します。

私は以前、主に登録フォームや送信フォームで使用される ajax + php フォーム更新検証について研究しました。 ajax テクノロジーの使用により、Web ページの訪問者の親しみやすさが大幅に向上します。 ページの親しみやすさを向上させるための最も重要なテクノロジーとして、ajax は不可欠です。 。 少ない。

もちろん、ajax はフォームの非更新検証だけでなく、ページ上の他の場所にもより適切に適用できます。今日は、ajax+ について説明します。 php を使用して画像を更新せずにアップロードします。

更新せずに写真をアップロードするテクノロジーは、一般的な QQ メールボックスの添付ファイルのアップロード、163 メールボックスの添付ファイルのアップロード、QQ スペースの写真のアップロードなど、添付ファイルや写真のアップロードによく使用されます。これらの種類のアプリケーションはすべて、Ajax 非リフレッシュ テクノロジーを使用します。現在のページではアップロードされた添付ファイルを確認できますが、通常の小規模サイトのバックグラウンドでは、商品をアップロードするときに、アップロードされた商品画像が表示されないことが多く、あまり良い結果が得られないことがよくあります。

以下は、ajax + php の非更新画像アップロードのソース コードです。これは単なる例です。この例を変更すると、Web ページに非更新画像アップロード効果を追加できます。このような効果はたくさんあるので、オンラインで検索できます。

file.php ファイル

fileupload.htm ページ

コードは次のとおりです

コードをコピー

<頭> $sort=12; $f_type=strto lower("swf,jpg,rar,zip,7z,iso,gif");//アップロードできるファイルの種類を設定します $file_size_max=200*1024*1024;//単一ファイルのアップロードの最大容量を制限します $overwrite = 0;//同じファイルの上書きを許可するかどうか、1: 許可、0: 許可しない $f_input="Files";//アップロードドメイン名を設定します Foreach($_FILES[$f_input]["error"] as $key => $error){ $up_error="いいえ"; If ($error == UPLOAD_ERR_OK){ $f_name=$_FILES[$f_input]['name'][$key];//アップロード元のファイル名を取得します $uploadfile=$uploaddir.strto lower(basename($f_name));                                                 $tmp_type=substr(strrchr($f_name,"."),1);// ファイル拡張子を取得します $tmp_type=strto lower($tmp_type); If(!stristr($f_type,$tmp_type)){ echo "<script>alert('「.$tmp_type.」形式のファイルをアップロードできません。「.$f_name.」ファイルのアップロードに失敗しました!')</script>"; $up_error="はい";                                                                                                                              If ($_FILES[$f_input]['size'][$key]>$file_size_max) { echo "<script>alert('アップロードしたファイル ".$f_name." の容量は ".round($_FILES[$f_input]<br> ['size'][$key]/1024)."Kb、指定された値より大きい".($file_size_max/1024)."Kb、アップロードに失敗しました!')</script>"; $up_error="はい";                                                                                                                              If (file_exists($uploadfile)&&!$overwrite){ echo "<script>alert('申し訳ありません、ファイル ".$f_name." はすでに存在します。アップロードに失敗しました!')</script>"; $up_error="はい";                                                                              $string = 'abcdefghijklmnopgrstuvwxyz0123456789'; $rand = ''; ($x=0;$x $rand .= substr($string,mt_rand(0,strlen($string)-1),1); $t=date("ymdHis").substr($gettime[0],2,6).$rand; $attdir="./ファイル/"; If(!is_dir($attdir)) { mkdir($attdir);} $uploadfile=$attdir.$t.".".$tmp_type If(($up_error!="yes") および (move_uploaded_file($_FILES[$f_input]['tmp_name']) [$key]、$uploadfile))){ $_msg=$_msg.$f_name.'アップロード成功';                                                                              他{ $_msg=$_msg.$f_name.'アップロードに失敗しました'; } } } echo "<script>window.parent.Finish('".$_msg."');</script>"; ?>

"文字列" == タイプ ID を返します。document.getElementById(id) : id;
};

作成: function() {
戻り関数() {
this.initialize.apply(this, 引数);
}
}
}

for (ソース内の var プロパティ) {
宛先[プロパティ] = ソース[プロパティ];
}
}

戻り関数() {
fun.apply(オブジェクト, 引数)を返します
}
}

for (var i = 0, len = list.length; i
//ファイルアップロードクラス

FileUpload.prototype = {
//フォームオブジェクト、ファイル制御ストレージスペース
初期化: 関数(フォーム、フォルダー、オプション) {

this.Form = $(form);//フォーム
this.Folder = $(folder) // ファイル制御の保存スペース
; this.Files = [];//ファイルコレクション

this.SetOptions(オプション);

this.FileName = this.options.FileName;
this._FrameName = this.options.FrameName;
this.Limit = this.options.Limit;
this.Distinct = !!this.options.Distinct;
this.ExtIn = this.options.ExtIn;
this.ExtOut = this.options.ExtOut;

this.onIniFile = this.options.onIniFile;
this.onEmpty = this.options.onEmpty;
this.onNotExtIn = this.options.onNotExtIn;
this.onExtOut = this.options.onExtOut;
this.onLimite = this.options.onLimite;
this.onSame = this.options.onSame;
this.onFail = this.options.onFail;
this.onIni = this.options.onIni;

if(!this._FrameName){
// インスタンスごとに異なる iframe を作成します
This._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
//IE は iframe の名前を変更できません
var oFrame = isIE ? document.createElement("

代码如下	复制幣
<頭> <スタイル> .fu_list {  幅:600ピクセル;  背景:#ebebeb;  フォントサイズ:12px; } .fu_list td {  パディング:5px;  行の高さ:20px;  背景色:#fff; } .fu_list テーブル {  幅:100%;  ボーダー:1px ソリッド #ebebeb; } .fu_list thead td {  背景色:#f4f4f4; } .fu_list b {  フォントサイズ:14px; } /*ファイル容器样式*/ a.files {  幅:90px;  高さ:30px;  オーバーフロー:非表示;  表示:ブロック;  ボーダー:1px ソリッド #BEBEBE;  背景:url(img/fu_btn.gif) 左上 繰り返しなし;  テキスト装飾:なし; } a.files:hover {  背景色:#FFFFEE;  背景位置:0 -30px; } /*ファイルは透明であり、全体的なタッチ公開面を覆います*/ a.files 入力 {  マージン左:-350px;  フォントサイズ:30px;  カーソル:ポインタ;  フィルター:アルファ(不透明度=0);  不透明度:0; } /*取消点击時の虚線框*/ a.files、a.files 入力 {  アウトライン:なし;/*ff*/  非表示フォーカス:式(this.hideFocus=true);/*ie*/ }                     上传文件               <みんな>                                           追加文：                                                                                                                       文件路径
注意: 同時にアップロードできるのは までです。 id= は「idExt」 ファイルのアップロードが許可されています。