ajax php 複数ファイルのアップロード コード_PHP チュートリアル

<頭>


<スクリプト>
(関数(){
 
var d = ドキュメント、w = ウィンドウ;

/**
 * IDで要素を取得
 */
関数 get(要素){
 if (要素の種類 == "文字列")
  要素 = d.getelementbyid(要素);
 戻り要素;
}

/**
 * イベントを dom 要素に添付します
 */
関数 addevent(el, type, fn){
 if (w.addeventlistener){
  el.addeventlistener(type, fn, false);
 } else if (w.attachevent){
  var f = function(){
    fn.call(el, w.event);
  };   
  el.attachevent('on' + type, f)
 }
}

/**
 * HTML チャンクから要素を作成して返します
 */
var toelement = function(){
 var div = d.createelement('div');
 戻り関数(html){
  div.innerhtml = html;
  var el = div.childnodes[0];
  div.removechild(el);
  戻ってください;
 }
}();

関数 hasclass(ele,cls){
 return ele.classname.match(new regexp('(s|^)'+cls+'(s|$)'));
}
関数 addclass(ele,cls) {
 if (!hasclass(ele,cls)) ele.classname += " "+cls;
}
関数 Removeclass(ele,cls) {
 var reg = new regexp('(s|^)'+cls+'(s|$)');
 ele.classname=ele.classname.replace(reg,' ');
}

// jquery lib (http://jquery.com/) からコピーされた getoffset 関数
if (document.documentelement["getboundingclientrect"]){
 // getboundingclientrect を使用してオフセットを取得します
 // http://ejohn.org/blog/getboundingclientrect-is-awesome/
 var getoffset = function(el){
  var box = el.getboundingclientrect(),
  doc = el.ownerdocument,
  body = doc.body,
  docelem = doc.documentelement,
  
  // IE の場合
  clienttop = docelem.clienttop || || body.clienttop || 0、
  clientleft = docelem.clientleft || body.clientleft || 0、
  
  // Internet Explorer 7 では getboundingclientrect プロパティは物理的なものとして扱われます
  // 一方、他のものは論理的です。 ie8 のように、すべてを論理的にします。  
  
  ズーム = 1;
  
  if (body.getboundingclientrect) {
   varbound = body.getboundingclientrect();
   ズーム = (bound.right -bound.left)/body.clientwidth;
  }
  
  if (ズーム > 1){
   clienttop = 0;
   clientleft = 0;
  }
  
  var top = box.top/zoom + (window.pageyoffset || docelem && docelem.scrolltop/zoom || body.scrolltop/zoom) - clienttop,
  left = box.left/zoom + (window.pagexoffset|| docelem && docelem.scrollleft/zoom || body.scrollleft/zoom) - clientleft;
    
  戻る{
   トップ: トップ、
   左: 左
  };
 }
 
} その他 {
 // すべてのオフセットを追加してオフセットを取得します
 var getoffset = function(el){
  if (w.jquery){
   return jquery(el).offset();
  }
   
  var 上 = 0、左 = 0;
  やります{
   トップ += el.オフセットトップ || 0;
   左 += el.オフセット左 || 0;
  }
  while (el = el.offsetparent);
  
  リターン{
   左: 左、
   トップ: トップ
  };
 }
}

関数 getbox(el){
 var 左、右、上、下; 
 var offset = getoffset(el);
 left = offset.left;
 トップ = オフセット.トップ;
      
 右 = 左 + el.offsetwidth;
 底部 = 上部 + el.offsetheight;  
  
 リターン{
  左: 左、
  右: そう、
  トップ: トップ、
  下:下
 };
}

/**
 *クロスブラウザのマウス座標
 */
関数 getmousecoords(e){
 // pagex/y は ie
ではサポートされていません  // http://www.quirksmode.org/dom/w3c_css教程om.html
 if (!e.pagex && e.clientx){
  // Internet Explorer 7 では、一部のプロパティ (マウス座標) が物理的なプロパティとして扱われます
  // 一方、他のものは論理 (オフセット) です。
  var ズーム = 1; 
  var body = document.body;
  
  if (body.getboundingclientrect) {
   varbound = body.getboundingclientrect();
   ズーム = (bound.right -bound.left)/body.clientwidth;
  }

戻る {
   x: e.clientx / ズーム + d.body.scrollleft + d.documentelement.scrollleft,
   y: e.clienty / ズーム + d.body.scrolltop + d.documentelement.scrolltop
  };
 }
 
 リターン{
  x: e.pagex、
  y: e.pagey
 };  

}
/**
 * 関数は一意の ID を生成します
 */
var getuid = function(){
 変数ID = 0;
 戻り関数(){
  return 'valumsajaxupload' + id++;
 }
}();

関数 filefrompath(file){
 return file.replace(/.*(/|)/, "");   
}

関数 gettext(ファイル){
 return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.to lowercase()) : '';
}

/**
 * xhr オブジェクトを取得するクロスブラウザーの方法
 */
var getxhr = function(){
 var xhr;
 
 戻り関数(){
  if (xhr) return xhr;
    
  if (typeof xmlhttprequest !== '未定義') {
   xhr = 新しい xmlhttprequest();
  } その他 {
   var v = [
    "microsoft.xmlhttp",
    "msxml2.xmlhttp.5.0",
    "msxml2.xmlhttp.4.0",
    "msxml2.xmlhttp.3.0",
    「msxml2.xmlhttp.2.0」
   ];
   
   for (var i=0; i     試してみてください{
     xhr = 新しい activexobject(v[i]);
     休憩;
    } キャッチ (e){}
   }
  }

xhr に戻る;
 }
}();

// ajaxupload を使用してください。 ajax_upload は次のバージョンで削除されます
ajax_upload = ajaxupload = function(ボタン, オプション){
 if (button.jquery){
  // jqueryオブジェクトが渡されました
  ボタン = ボタン[0];
 } else if (ボタンの種類 == "string" && /^#.*/.test(button)){
  ボタン = ボタン.スライス(1);    
 }
 ボタン = 取得(ボタン); 
 
 this._input = null;
 this._button = ボタン;
 this._disabled = false;
 this._submitting = false;
 // ボタンがクリックされると変数が true に変更されます
 // 3 秒前 (Mac 上の Safari エラーを修正するために必要)
 this._justclicked = false;
 this._parentdialog = d.body;
  
 if (window.jquery && jquery.ui && jquery.ui.dialog){
  varparentdialog = jquery(this._button).parents('.ui-dialog');
  if (parentdialog.length){
   this._parentdialog = 親ダイアログ[0];
  }
 }
     
 this._settings = {
  // サーバー側のアップロード スクリプトの場所
  アクション: 'upload.php'、
  // ファイルアップロード名
  名前: 'ユーザーファイル'、
  // 送信する追加データ
  データ: {}、
  // ファイルが選択されたらすぐに送信します
  自動送信: true、
  // サーバーから返されると予想されるデータのタイプ。
  // html と xml は自動的に検出されます。
  // json データを応答として使用する場合にのみ役立ちます。
  // その場合は「json」に設定します。
  応答タイプ: false、
  // safari を修正するサーバーサイド スクリプトの場所
  // "connection: close" ヘッダーを返すハング問題
  接続を閉じる: ''、
  // マウスホバー時にボタンに適用されるクラス
  ホバークラス: 'ホバー'、
  // ユーザーがファイルを選択するとき、自動送信を無効にすると便利です
  onchange: 関数(ファイル、拡張子){}、
  // ファイルがアップロードされる前に呼び出されるコールバック
  // アップロードをキャンセルするには false を返すことができます
  onsubmit: 関数(ファイル、拡張子){},
  // ファイルのアップロードが完了すると起動されます
  // 警告！応答として「false」文字列を使用しないでください!
  oncomplete: 関数(ファイル、応答) {}
 };

// ユーザーのオプションをデフォルトとマージします
 for (オプションの変数 i) {
  this._settings[i] = オプション[i];
 }
 
 this._createinput();
 this._rerouteclicks();
}
   
// メソッドをクラスに割り当てます
ajaxupload.prototype = {
 setdata : 関数(データ){
  this._settings.data = データ;
 }、
 無効にする: function(){
  this._disabled = true;
 }、
 有効にする: function(){
  this._disabled = false;
 }、
 // インスタンスを削除します
 破壊: function(){
  if(this._input){
   if(this._input.parentnode){
    this._input.parentnode.removechild(this._input);
   }
   this._input = null;
  }
 }、
 /**
  * ボタンの上に非表示のファイル入力を作成します
 */
 _createinput : function(){
  var self = this;
  var input = d.createelement("input");
  input.setattribute('タイプ', 'ファイル');
  input.setattribute('name', this._settings.name);
  var スタイル = {
   '位置' : '絶対'
   、'マージン': '-5px 0 0 -175px'
   、'パディング': 0
   、'幅': '220px'
   ,'高さ': '30px'
   、'fontsize': '14px'
   、'不透明度': 0
   ,'カーソル': 'ポインタ'
   ,'表示': 'なし'
   ,'zindex' : 2147483583 //opera 9.0-9.2x でサポートされる最大 zindex
   // 奇妙なことに、2147483647 を期待していました
   // IE では動作しません:(
   //,'方向' : 'ltr'
  };
  for (スタイルの変数 i){
   input.style[i] = スタイル[i];
  }
  
  // 要素の不透明度が存在することを確認します
  // (つまり、代わりにフィルターを使用します)
  if ( ! (input.style.opacity === "0")){
   input.style.filter = "alpha(opacity=0)";
  }
       
  this._parentdialog.appendchild(input);

addevent(input, 'change', function(){
   // 入力からファイル名を取得します
   var file = filefrompath(this.value); 
   if(self._settings.onchange.call(self, file, gettext(file)) == false ){
    戻る;    
   }
   // 値が変更されたときにフォームを送信します
   if (self._settings.autosubmit){
    self.submit();      
   }
  });
  
  // safari の問題を修正
  // 問題は、ファイル選択ダイアログが開く前に入力を放置した場合です
  // ファイルはアップロードされません。
  // ダイアログが開くのが遅い（シートダイアログなので開くのに時間がかかる）
  // ボタンを押したままにしておいても大丈夫です。
  // したがって、すぐに表示を none に変更すべきではありません
  addevent(input, 'クリック', function(){
   self.justclicked = true;
   settimeout(function(){
    // ダイアログが開くまで 3 秒待ちます
    self.justclicked = false;
   }、2500);   
  });  
  
  this._input = 入力;
 }、
 _rerouteclicks : 関数 (){
  var self = this;
 
  // つまり、このメソッドを使用すると「アクセスが拒否されました」エラーが表示されます
  // 他のブラウザは click() を無視します
  // addevent(this._button, 'click', function(e){
  // self._input.click();
  // });
    
  var ボックス、dialogoffset = {top:0、left:0}、over = false;
         
  addevent(self._button, 'mouseo教程ver', function(e){
   if (!self._input || over) return;
   
   オーバー = true;
   box = getbox(self._button);
     
   if (self._parentdialog != d.body){
    ダイアログオフセット = getoffset(self._parentdialog);
   }
  });
  
 
  // ボタン上でマウスアウトを使用することはできません
  // 目に見えない入力が上にあるため
  addevent(document, 'mousemove', function(e){
   var input = self._input;   
   if (!input || !over) return;
   
   if (self._disabled){
    削除クラス(self._button, self._settings.hoverclass);
    input.style.display = 'なし';
    戻ります;
   }
          
   var c = getmousecoords(e);

if ((c.x >= box.left) && (c.x    (c.y >= box.top) && (c.y <= box.bottom)){
       
    input.style.top = c.y - Dialogoffset.top + 'px';
    input.style.left = c.x - Dialogoffset.left + 'px';
    input.style.display = 'ブロック';
    addclass(self._button, self._settings.hoverclass);
        
   } その他 {
    // マウスがボタンを離れた
    オーバー = false;
   
    var check = setinterval(function(){
)      // 入力がクリックされただけの場合は非表示にしないでください
     // Safari のバグを防ぐため
     
     if (self.justclicked){
      戻ります;
     }
     
     if ( !over ){
      input.style.display = 'なし'; 
     }
    
     クリア間隔(チェック);
    
    }、25);
     

removeclass(self._button, self._settings.hoverclass);
   }
  });   
   
 }、
 /**
  * 一意の名前で iframe を作成します
 */
 _createiframe : function(){
  // ユニークな名前
  // gettime は返されることがあるため、使用できません
  // Safari でも同じ値:(
  var id = getuid();
  
  // IE6 の「このページには安全なアイテムと安全でないアイテムの両方が含まれています」というプロンプトを削除します
  // http://tinyurl.com/77w9wh
  var iframe = toelement('