2014-01-08 51 views
0

我在線上關注了一個非常有用的教程,通過AJAX在HTML表單中上傳文件。 下面是我的HTML代碼,然後是jQuery代碼。PHP中的Ajax XHR2文件上傳訪問值

HTML

<input type="file" id="myFile" name="myFile" /> 
<input type="button" id="upload" value="upload" /> 
<br /> 
<progress id="prog" value="0" min="0" max="100"></progress> 

jQuery的

$("#upload").on("click",function() { 
    $("#myFile").upload("xhr2.php", function(success) { 
    },$("#prog")); 
}); 

我如何可以訪問PHP上傳的文件來處理數據,並輸出到頁面的任何錯誤?

編輯

// data is optional 
    $.fn.upload = function(remote,data,successFn,progressFn) { 
     // if we dont have post data, move it along 
     if(typeof data != "object") { 
      progressFn = successFn; 
      successFn = data; 
     } 
     return this.each(function() { 
      if($(this)[0].files[0]) { 
       var formData = new FormData(); 
       formData.append($(this).attr("name"), $(this)[0].files[0]); 

       // if we have post data too 
       if(typeof data == "object") { 
        for(var i in data) { 
         formData.append(i,data[i]); 
        } 
       } 

       // do the ajax request 
       $.ajax({ 
        url: remote, 
        type: 'POST', 
        xhr: function() { 
         myXhr = $.ajaxSettings.xhr(); 
         if(myXhr.upload && progressFn){ 
          myXhr.upload.addEventListener('progress',function(prog) { 
           var value = ~~((prog.loaded/prog.total) * 100); 

           // if we passed a progress function 
           if(progressFn && typeof progressFn == "function") { 
            progressFn(prog,value); 

           // if we passed a progress element 
           } else if (progressFn) { 
            $(progressFn).val(value); 
           } 
          }, false); 
         } 
         return myXhr; 
        }, 
        data: formData, 
        dataType: "json", 
        cache: false, 
        contentType: false, 
        processData: false, 
        complete : function(res) { 
         var json; 
         try { 
          json = JSON.parse(res.responseText); 
         } catch(e) { 
          json = res.responseText; 
         } 
         if(successFn) successFn(json); 
        } 
       }); 
      } 
     }); 
    }; 
+0

由於我們不知道'upload'方法是什麼(它不是核心jQuery),這很難說。 – Quentin

+0

我將添加「上傳」功能代碼 – user3170837

+1

,可能是$ _FILES。 –

回答

0

這將是一個艱難的工作要做,因爲你的形式上傳,文件上傳在不同的要求正在發生。這就是說你可以引用你的文件的唯一方法是讓它在之前上傳表單數據。有不同的方式可以引用你的文件,通過會話,將它作爲額外的queryString參數傳遞給你的表單,使用數據庫(這將是無聊的),這真的取決於你。主要的問題是它們在不同的請求中,你需要建立它們之間的連接。祝你好運!