HTML文件上傳過濾器的onclick可能嗎？

我創建一個Facebook應用程序，它可以讓用戶上傳通過HTML表單的照片。我想知道這是可以實現的過濾器窗體被提交前檢查文件分機。HTML文件上傳過濾器的onclick可能嗎？

<form enctype="multipart/form-data" action="uploader.php" method="POST"> 
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 
Choose a file to upload: <br/> 
<input name="uploadedfile" type="file" class="btn" 
    onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" accept="image/gif,image/png,image/jpeg"/> (limit: 2MB)<br /> 
<input type="submit" value="Upload File" class="btn" 
    onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" 
    onclick='checkExt()'/> 
</form>

我已經嘗試了不同的方式，JavaScript或PHP。

function checkExt() { 
     var filePath = document.getElementByName("uploadedfile"); 

     if(filePath.indexOf('.') == -1) 
      return false; 

     var validExtensions = new Array(); 
     var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase(); 

     validExtensions[0] = 'jpg'; 
     validExtensions[1] = 'jpeg'; 
     validExtensions[2] = 'bmp'; 
     validExtensions[3] = 'png'; 
     validExtensions[4] = 'gif'; 


     for(var i = 0; i < validExtensions.length; i++) { 
      if(ext == validExtensions[i]) 
       return true; 
     } 

     top.location.href = 'http://www.google.com'; 
     return false; 
    }

爲PHP，有沒有辦法在表單提交之前獲取文件信息？

$file = document.getElementByName("uploadedFile"); //wondering if this works. 
$result_array = getimagesize($file); 

    if ($result_array !== false) { 
     $mime_type = $result_array['mime']; 
     switch($mime_type) { 
      case "image/jpeg": 
       echo "file is jpeg type"; 
       break; 
      case "image/gif": 
       echo "file is gif type"; 
       break; 
      default: 
       echo "file is an image, but not of gif or jpeg type"; 
     } 
    } else { 
     echo "file is not a valid image file"; 
    }

請指教我。我還是新來的Facebook應用程序。

來源

2011-03-28 meAtStackOverflow

爲什麼你重定向，如果他們試圖上傳錯誤的分機？我會刪除top.location.href = 'http://www.google.com';

你必須在腳本中的幾個誤區。

var filePath = document.getElementByName("uploadedfile");

需求是

var filePath = document.getElementsByName("uploadedfile")[0].value;

或添加一個ID，並做

var filePath = document.getElementById("uploadedfile").value;

或使用我最喜歡的方法和形式，對象傳遞給函數：

<form onsubmit="return checkExt(this)" ...> 

function checkExt(theForm) { 
    var filePath = theForm.uploadedfile.value;

最後從提交和刪除的onclick把它的形式的onsubmit：

<form enctype="multipart/form-data" action="uploader.php" method="POST" 
onSubmit="return checkExt(this)"> 
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 
Choose a file to upload: <br/> 
<input name="uploadedfile" id="uploadedfile" type="file" class="btn" 
    onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" accept="image/gif,image/png,image/jpeg"/> (limit: 2MB)<br /> 
<input type="submit" value="Upload File" class="btn" 
    onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/> 
</form>

來源

2011-03-28 09:47:38 mplungjan

打我給它：http://jsfiddle.net/yahavbr/tLuCW/ :) – 2011-03-28 09:54:06

@Shadow :)我也想過通過的形式，但決定不太多的變化，在同一時間:) – mplungjan 2011-03-28 09:59:16

謝謝你的建議。我把谷歌的存在僅僅是出於測試。哈哈。謝謝！ – meAtStackOverflow 2011-03-29 04:06:32

只是一些想法：

很可能有JS檢查擴展。它只是'。'之後的部分，所以基本的字符串操作。
這不是安全和不可靠的，雖然。它可以被愚弄和迴避。
您可以發送AJAX請求有你提交表單之前發送的擴展（S）。
對於漂亮acurate的文件類型，信息退房PHP的FileInfo-Extension。

來源

2011-03-28 10:11:23 Raffael

感謝您所有的意見！ – meAtStackOverflow 2011-03-29 04:06:01

HTML文件上傳過濾器的onclick可能嗎？

回答

相關問題