處理HTML5 formupload（文件）

Question

我有3個問題（！）。我會盡量在短期內:-)解釋：

1）發送文件到服務器腳本的位置時，在給定的行動=「」我不想打開一個新的窗口！ 但事實上，當我提交一個空白窗口的畫面。所以現在，我打開它與目標=「_空白」。有沒有辦法說 「只要做你的動作，把數據發送到sript，但不要打開任何窗口或內容？」或「關閉空白窗口 只要你打開它:-)？

2.）你知道一種方式發送http頭字段與形式就像使用ajax嗎？我需要發送一個認證3）你會建議使用哪個事件（html5 new one？）來執行發送數據後的成功（在ajax中，我總是使用 「完成或成功事件，有沒有像這樣的表單？ ）

：困惑：感謝您的建議

<form id="uploaddata" enctype="multipart/form-data" method="post" action="/cgi-bin/send/?auth='+sessionStorage.logindata+'" target="_blank"> 
<input type="hidden" name="folder" value="'+PATH+'" /> 
<input id="file" type="file" class="choosefile" max="999" min="1" name="attach" filename="" accept=""> 
<input type="button" id="formupload" class="submitupload" value="Upload"> 
<input type="submit" class="submitupload button" value="Upload">           
</form> 

Answer 1

不使用AJAX，你會失去很多的必需品的這種形式。

通過使用AJAX，你可以：1。 阻止彈出 2.添加額外的頭 3.有一個事件

沒有Ajax的表單提交動作有去的地方，不管是彈出窗口還是相同窗口。您的帖子回覆將決定瀏覽器中顯示的內容。

所以，你可以通過發送回包含所需行動的另一個網頁照顧在服務器端的問題1和3。

問題2，您可以發送視爲使用GET方法而不是POST方法的查詢字符串，但他們不會是頭，您可以使用隱藏的表單字段，但是這是低於在大多數情況下可取的。另外，使用表單中的所有內容都會隨數據包一起發送到服務器，並且可以讀取，但不會再出現在標題中。

我建議只使用AJAX來解決你的問題，因爲它的異步和自定義的特性，這似乎是一個非常適合你的問題。

編輯： 正如你所問的iframe的功能，這裏的格式信息：

<form id="fileAPITesting" action="startStopResume.aspx" method="POST" target="upload_target" enctype="multipart/form-data" encoding="multipart/form-data">  
     <input type="file" id="fileInput" name="fileInput" /> 
     <button id="submit" type="submit" >Submit</button> 
    </form> 
<iframe id="upload_target" name="upload_target" src="#" style="display:none;"></iframe> 

這將自動重定向功能後的iframe中。然後，您可以添加一些代碼（在這裏我使用jQuery簡化），以防止這一點，並使用AJAX：

<script type="text/javascript"> 
     $('#fileAPITesting').bind('submit', function(e){ 
      e.preventDefault();   
      fileProcessing(document.getElementById('fileInput'));  
     }); 
     setStatusArea();   
    </script> 

這裏，jQuery的表格插件變得很方便。另外值得注意的是，如果您鏈​​接到Google代碼庫中的jQuery，您很可能不會爲頁面添加開銷，因爲許多其他頁面使用jQuery，並且它將位於用戶的緩存中。這裏是一個鏈接到該頁面：

http://plugins.jquery.com/project/form

我已經與我的形式等要求衆多，但這裏是我的後臺頁面的樣本：

function fileProcessing(fileToProcess){ 
    // grab file information only allows 1 file at a time 
    // In IE have to grab differently 
    if(window.File){ 
     file = fileToProcess.files[0]; 
     clearForm(false); 
     if (file){ 
      fileLength = file.size; 
      fileName = file.name; 
      totalBLObs = Math.ceil((fileLength/BYTES_PER_CHUNK));   
      initialInformation(); 
      $('#stop').toggle(); 
      hideButtons(); 
      $('#pause').toggle(); 
      fileSending(); 
     }else{ 
      statusField('No file selected'); 
     } 
    }else{ 
     // without a the file API we have to submit the entire form to an iframe 
     file = fileToProcess; 
     clearForm(false); 
     fileAPI = false; 
     time = new Date();  
     if(file.value){ 
      // IE cannot get a proper handle on the information 
      hideButtons(); 
      fileName = file.value; 
      fileName = fileName.substr(fileName.lastIndexOf('\\') + 1); 
      statusField('<br />The File API is not implemented.' + 
       '<br />Attempting alternate method with only start & stop status' + 
       '<br />Started at: ' + time.toLocaleTimeString());   
      $('#fileAPITesting').ajaxSubmit({ 

       beforeSubmit: function(a,f,o) { 
        o.dataType = 'string';     
        try{       
         $('#uploadOutput').html('<img src="images/loaderb64.gif"' + 
          'alt="loading" /><br />Submitting...'); 
         $('#uploadOutput').show(); 
        }catch(e){ 
         statusField('<br />Submitting...'); 
        } 
       }, 
       success: function(data) {   
        if (typeof data == 'object' && data.nodeType) 
         data = elementToString(data.documentElement, true); 
        else if (typeof data == 'object') 
         data = objToString(data); 
        time = new Date(); 
        statusField('<br />'+ data + ' at ' + time.toLocaleTimeString()); 
        try{ 
         $('#progress').hide(); 
         $('#progress').html(''); 
        }catch(e){ 
         // #progress doesn't exist 
        } 
       } 
      }); 
     }else{ 
      statusField('No file selected'); 
     } 
    } 
}; 

希望啓動你失望正確的道路。