2017年9月20日 星期三

未上傳之前先用javascript檢查檔案

HTML設計
設計按鈕格式,onclick先檢查,若正確才儲存

<input onclick="checktosave();" type="button" value="儲存" />
   

//檢查上船附檔名及檔案大小
    function checktosave() {
         var f = document.getElementById('upfile');
         var uploadpath=f.value;
         var ext = uploadpath.substring(uploadpath.lastIndexOf('.') + 1, uploadpath.length);
         var ext = ext.toLowerCase();
         if (ext=='odp') {
              filesize = f.files.item(0).size;
              if (filesize&gt;5*1024*1024) {
                alert('檔案太大,必須小於5M');
              } else {
                document.getElementById('saveForm').submit();
              } 
         } else {
           alert('必須是ODP檔');
         }

     }
//檢查圖片
var _URL = window.URL || window.webkitURL;
      var h=0;
      var w=0;
      $('#upfile').change(function(e) {
        var image, file;
        if ((file = this.files[0])) {
        image = new Image();
        image.onload = function() {
           
            w=this.width;
            h=this.height;
        };
   
        image.src = _URL.createObjectURL(file);
        }

      });

function checktosave() {
         var f = document.getElementById('upfile');
         var uploadpath=f.value;
         //var pos = uploadpath.lastIndexOf('.') + 1;
         var ext = uploadpath.substring(uploadpath.lastIndexOf('.') + 1, uploadpath.length);
         var ext = ext.toLowerCase();
         //filesize = f.files.item(0).size;

         if (ext=='bmp' || ext=='png' || ext=='jpg' || ext=='jepg' || ext=='gif') {

            if (w!= '{$default_width}' || h!= '{$default_height}' )
              alert('圖片的大小必須是 {$default_width} * {$default_height} ');
            else {
              document.getElementById('saveForm').submit();
            } 
         } else {
           alert('必須是圖形檔');
         }

     }

運用到學生作品版
      $fileext = $row['fileext'];
      if ($fileext=='') { //任何設定
        $ext_str='true';
      } else {
        $ext_str='';
        $ext_arr = explode(',',$fileext);
        foreach ($ext_arr as $e) {
          $ext_str .= " ext=='{$e}' || ";
        }
        //刪除後三個字元
        $ext_str = substr($ext_str,0,strlen($ext_str)-3);
     
      }
      $op_bar.="<br />
<div class="btn-group">
<form action="?do=quickupload&amp;sn=$sn" class="form-inline" enctype="multipart/form-data" id="saveForm" method="POST">
<div class="form-group">
<label for="files">上傳{$row['cfile']} {$row['fileext']}檔案</label> <input class="form-control" id="files" multiple="" name="upfiles[]" type="file" /></div>
<div class="form-group">
<button class="btn btn-default" onclick="checktosave();" type="button">交作業</button></div>
</form>
</div>
<script>
      function checktosave() {
         var f = document.getElementById('upfile');
         var uploadpath=f.value;
         var ext = uploadpath.substring(uploadpath.lastIndexOf('.') + 1, uploadpath.length);
         var ext = ext.toLowerCase();
         if ({$ext_str}) {
              filesize = f.files.item(0).size;
              if (filesize<10 || filesize>12*1024*1024 ) {
                if (filesize<10)
                  alert('檔案太小,必須先儲存');
                else
                  alert('檔案太大,必須小於12M');
              } else { 
                document.getElementById('saveForm').submit();
              } 
         } else {
           alert('檔案格式錯誤');
         }

     }
     </script>
      ";

沒有留言:

張貼留言