繁体   English   中英

多图像上传验证javascript

[英]multiple image upload validation javascript

我使用php代码上传了多个文件。 它运作良好。 但是,当我们单击提交按钮而不上传任何文件时,它显示成功,并以0值存储在数据库中。我尝试了一些JavaScript验证“请上传图像”。 但仍在尝试...

任何人都可以帮助我..?

这是代码...

>   <?php
    if(isset($_FILES['files'])){
     $errors= array();
    foreach($_FILES['files']['tmp_name'] as $key => $tmp_name ){
        $file_name = $key.$_FILES['files']['name'][$key];
        $file_size =$_FILES['files']['size'][$key];
        $file_tmp =$_FILES['files']['tmp_name'][$key];
        $file_type=$_FILES['files']['type'][$key];  
        if($file_size > 2097152){
            $errors[]='File size must be less than 2 MB';
        }
        $query="INSERT into upload_data (`USER_ID`,`FILE_NAME`,`FILE_SIZE`,`FILE_TYPE`) VALUES('$user_id','$file_name','$file_size','$file_type'); ";
        $desired_dir="gallery";
        if(empty($errors)==true){
            if(is_dir($desired_dir)==false){
                mkdir("$desired_dir", 0700);        // Create directory if it does not exist
            }
            if(is_dir("$desired_dir/".$file_name)==false){
                move_uploaded_file($file_tmp,"gallery/".$file_name);
            }else{                                  //rename the file if another one exist
                $new_dir="gallery/".$file_name.time();
                 rename($file_tmp,$new_dir) ;               
            }
            mysql_query($query) or die(mysql_error());          
        }else{
                print_r($errors);
        }
     }
    if(empty($error)){
        echo "Success";
    }
    }
    ?>

您可以在第一行中将if(isset())与if(!empty())交换,以检查是否已上传任何文件。

在客户端,您可以将参数“ required”添加到<input type = file>

那是我的第一个念头


ID建议重新编写脚本以使用例外:

<?php
if(!empty($_FILES['files']))
{

    try
    {

        foreach($_FILES['files']['tmp_name'] as $key => $tmp_name )
        {
            $file_name = $key.$_FILES['files']['name'][$key];
            $file_size =$_FILES['files']['size'][$key];
            $file_tmp =$_FILES['files']['tmp_name'][$key];
            $file_type=$_FILES['files']['type'][$key];

            if($file_size > 2097152)
                throw new Exception('File size must be less than 2 MB');

            $query="INSERT into upload_data (`USER_ID`,`FILE_NAME`,`FILE_SIZE`,`FILE_TYPE`) 
                    VALUES(
                     '". intval($user_id) ."',
                     '". stripslashes(mysql_real_escape_string($file_name)) ."',
                     '". intval($file_size). "',
                     '". stripslashes(mysql_real_escape_string($file_type)) ."'); ";
            $desired_dir="gallery";

            if(is_dir($desired_dir)==false)
            {
                mkdir("$desired_dir", 0700);        // Create directory if it does not exist
            }

            if(is_dir("$desired_dir/".$file_name)==false)
            {
                move_uploaded_file($file_tmp,"gallery/".$file_name);
            }
            else
            {
                //rename the file if another one exist
                $new_dir="gallery/".$file_name.time();
                rename($file_tmp,$new_dir) ;               
            }

            if (!mysql_query($query))
             throw new Exception(mysql_error());
        }

        echo "Success";
    }
    catch (Exception $e)
    {
        print_r($e->getMessage());
    }
}
else
{
    echo "No files uploaded";
}

我尝试对“请上传图片”进行一些JavaScript验证。

您可以添加Javascript验证,但是如果您的浏览器支持H TML 5 Javascript API-FormData

Java脚本

http://jsfiddle.net/dimitardanailov/98VeF/1/

$(document).ready(function() {
  if (window.FormData) {
      $('input[type="file"]').bind({
          change : function()
          {
              var input = this,
              files = input.files;

              if (files.length > 0) {
                  var regExp = new RegExp('image.(jpeg|jpg|gif|png)', 'i');
                  for (var i = 0; i < files.length; i++)
                  {
                      var file = file = files[i];
                      var matcher = regExp.test(file.type);

                      if (!matcher)
                      {
                          alert('invalid file');
                      }
                  }
              } else {
                  alert('please add 1 file');
              }   
          }
      });
  } else {
      alert('Browser not support Formdata');
  }
});
<script type="text/javascript">
    $(function () {
        $('#Image').bind('change', function() {
            var a=(this.files[0].size);
            if((a/1048576) > 2.048) {
                alert('Your file size should not exceed 2 Mb.');
            };
        });
        $('#btnSubmit').click(function () {
            var fileExtension = ['png', 'jpg', 'jpeg'];
            if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                alert("Only Png,jpeg and jpg  image files allowed");
                return false;
            }
            else
                return true;
        })
    })
</script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM