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>"; ?>

     
     




   

                                                                                   



<スクリプトタイプ="text/javascript">

var isIE = (document.all) ? true : false;

var $ = 関数 (id) {

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

varクラス = {

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

var Extend = 関数(宛先, ソース) {

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

var Bind = function(object, fun) {

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

var Each = function(list, fun){

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

var FileUpload = Class.create();

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」 ファイルのアップロードが許可されています。