2011-08-08 114 views
0

在我的頁面上,我有一堆文件上傳字段(全部使用name="files[]",因此它可以作爲PHP數組處理)。onSubmit檢查文件上傳類型?

它們都位於兩個div中的一個,我們稱它們爲'div1'和'div2'。

如何使用javascript以便onSubmit檢查文件類型,並且div1中的所有文件只能是'pdf',並且div2中的所有文件只能是'pdf'或'doc'?

一個簡單的警告彈出框會做(即「文件只能是PDF格式」)

有什麼建議?

**************** UPDATE *******************

做了一個更重要的問題: Add a filetype validation to phpmailer?

+0

的可能重複[如何擁有jQuery的有關限制文件類型上傳?](http://stackoverflow.com/questions/651700/how-to-have-jquery-restrict-file-types-on-upload) –

+0

@Diodeus同樣的想法,但我不想用jquery –

回答

0

文件上傳元素在瀏覽器中受到嚴格保護,而JS對其內容的訪問很少。處理文件本身的任何事情都會被鎖定,因爲系統中的任何漏洞都可能允許惡意站點從用戶的計算機上竊取文件。

最簡單的解決方法是在字段旁邊放一個小紙條,上面寫着「PDF Only!」。然後使用服務器端腳本來確認它是否爲pdf。

+0

這就是我什麼在想,但那會是討厭區分僅PDF和PDF或DOC,但它聽起來像是要做什麼。 –

+0

然後給兩個文件部分不同的名稱。 'name =「pdfs []」'和'name =「docs []」'。 –

+0

是的,即時通訊ganna做什麼。現在,我有下面的腳本使用phpmailer將文件附加到一個電子郵件(其實,我想你在以前的問題幫助我吧!).. 'foreach(array_keys($ _ FILES ['files'] ['name'])作爲$ key){ $ source = $ _FILES ['files'] ['tmp_name'] [$ key]; $ filename = $ _FILES ['files'] ['name'] [$ key]; $ mail-> AddAttachment($ source,$ filename); }' –

0

你可以這樣:

HTML:

<form method="post" enctype="multipart/form-data" name="form"> 

<input type="file" name="file" /><br /> 
<input type="file" name="file" /> 
<input type="submit" /> 
</form> 

的JavaScript:

var fileInput = document.getElementsByName("file"); 
    for(var i = 0, len = fileInput.length; i < len; i++) { 
    fileInput[i].addEventListener('change', 
     function(e) { 
      if(this.files[0].name.match(/\.pdf$/) == null) { 
       alert('Files can only be PDF.'); 
       return; 
      } 
     }, 
     false 
    ); 
} 
+0

我真的需要它不讓表單提交如果一個非PDF文件。這隻會在上傳時發出警報。 –

+0

選擇文件時顯示此警報(速度更快,不需要提交表單)。 但是,如果你想的那麼更換的FileInput [I]閱讀進度(通過的FileInput [I]閱讀進度「變」(「提交」 –

0

可以解決表單元素和讀取name屬性,那麼你得到文件名並可以與文件擴展名一起使用。

但是這可能只是爲了讓用戶更容易 - 所以你可以在上傳過程之前檢測錯誤的文件類型。

這不是一種保護方式。

您也可以將期望的文件類型傳遞給對話框本身。大多數文件管理器和瀏覽器都會尊重它,並只顯示要選擇的文件類型,但用戶可以單擊下拉菜單並選擇「查看所有文件」併爲他/她想要的任何文件創建圖片。

這是用accept attribute完成的。

如果你想幫助用戶選擇正確的文件,上述兩種方法都是合適的,我甚至會一起使用它們。

如果你想保護你的服務不是錯誤的文件類型,你必須評估文件服務器端。文件擴展名檢查不合適,有php functions可用於確定文件的真實MIME類型。

0

您可以檢查使用此代碼提交爲每個文件上傳

var parts = document.getElementById('myFileField').value.split('.'); 
if (parts[parts.length-1] != 'pdf') { 
    alert('Invalid extension. Needs to be PDF.'); 
} 

由掩膜合併工作,

var fileInputs = document.getElementsByName("files[]"); 
for (var ele in fileInputs) { 
    if (ele.parentNode.id = 'div1') { 
     var parts = ele.value.split('.'); 
     if (parts[parts.length-1] != 'pdf') { 
      alert('Invalid extension: "' + ele.value + '". Needs to be PDF.'); 
     } 
    } 
    else if (ele.parentNode.id = 'div2') { 
     var parts = ele.value.split('.'); 
     if (parts[parts.length-1] != 'pdf' && parts[parts.length-1] != 'doc') { 
      alert('Invalid extension: "' + ele.value + '". Needs to be PDF or DOC.'); 
     } 
    } 
} 
+0

香港專業教育學院瞭解到,你不能訪問的onsubmit使用JavaScript文件上傳字段的值.. –