Javascript 移动\上传\包含多张图片的文件_Javascript_Php_Ajax

Javascript 移动\上传\包含多张图片的文件

javascript php ajax

Javascript 移动\上传\包含多张图片的文件,javascript,php,ajax,Javascript,Php,Ajax,这就是我最初拥有的 $('#file').change(function(){ var file = this.files[0]; var name = file.name; var size = file.size; var type = file.type; if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(name)) { alert('You must select an image file on

这就是我最初拥有的

$('#file').change(function(){
  var file = this.files[0];
  var name = file.name;
  var size = file.size;
  var type = file.type;
  if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(name)) {              
    alert('You must select an image file only');              
  }
  if (size > 5000000) {
    alert('File size must be less than 5 Megabytes');  
  }
  if (size <= 0) {
    alert('File size must be larger than 0');  
  }
});

在我的php文件中我有

if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
$filename=$_FILES['file']['name'];   //this param contains name of file
$arr = explode('.', $filename);
$extension=end($arr);
$newfilename=$first_name . '_' . $last_name . '_' . date('m-j-y_h-i-s') . '.' . $extension;
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' .$newfilename);
}

if（0<$\u文件['file']['error']）{
回显“错误：”.$\u文件['file']['Error'].
；
}
否则{
$filename=$\u FILES['file']['name']；//此参数包含文件名
$arr=分解（'.'，$filename）；
$extension=end（$arr）；
$newfilename=$first_name.'.'.$last_name.'.'.'.date（'m-j-y_h-i-s'）。$extension；
移动上传的文件（$\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\$newfilename）；
}

这非常有效，我不想再继续添加两个文件进行上传。我只是不知道如何着手修复它。

到目前为止，我就是这么做的，但我100%肯定这是不对的

$('#fileFace').change(function(){
  var file = this.files[0];
  var name = file.name;
  var size = file.size;
  var type = file.type;
  if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(name)) {              
    alert('You must select an image file only');              
  }
  if (size > 5000000) {
    alert('File size must be less than 5 Megabytes');  
  }
  if (size <= 0) {
    alert('File size must be larger than 0');  
  }
});
$('#fileFront').change(function(){
  var file = this.files[0];
  var name = file.name;
  var size = file.size;
  var type = file.type;
  if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(name)) {              
    alert('You must select an image file only');              
  }
  if (size > 5000000) {
    alert('File size must be less than 5 Megabytes');  
  }
  if (size <= 0) {
    alert('File size must be larger than 0');  
  }
});

$('#fileBack').change(function(){
  var file = this.files[0];
  var name = file.name;
  var size = file.size;
  var type = file.type;
  if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(name)) {              
    alert('You must select an image file only');              
  }
  if (size > 5000000) {
    alert('File size must be less than 5 Megabytes');  
  }
  if (size <= 0) {
    alert('File size must be larger than 0');  
  }
});

$（'#fileFace'）。更改（函数（）{
var file=this.files[0]；
var name=file.name；
var size=file.size；
var type=file.type；
如果（！（/\（gif | jpg | jpeg | tiff | png）$/i）.test（name））{
警报（“您必须仅选择图像文件”）；
}
如果（尺寸>5000000）{
警报（“文件大小必须小于5 MB”）；
}
如果（尺寸5000000）{
警报（“文件大小必须小于5 MB”）；
}
如果（尺寸5000000）{
警报（“文件大小必须小于5 MB”）；
}
if（size下面是一个使用类对多个输入元素重复使用相同javascript的示例：
html:









提交

javascript:
$(function(){

  $('.file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(name)) {              
      alert('You must select an image file only');              
    }
    if (size > 5000000) {
      alert('File size must be less than 5 Megabytes');  
    }
    if (size <= 0) {
      alert('File size must be larger than 0');  
    }

    console.log(file, name);

  });


  $('.sub').click(function() {

    $('.file').each(function(index, el) {
      console.log('Input ' + el);
    });

  });

});

$（函数（）{
$（'.file'）.change（函数（）{
var file=this.files[0]；
var name=file.name；
var size=file.size；
var type=file.type；
如果（！（/\（gif | jpg | jpeg | tiff | png）$/i）.test（name））{
警报（“您必须仅选择图像文件”）；
}
如果（尺寸>5000000）{
警报（“文件大小必须小于5 MB”）；
}
如果（尺寸）
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <form>

      <input type="file" class="file" name="file1"><br/>
      <input type="file" class="file" name="file2"><br/>
      <input type="file" class="file" name="file3"><br/>

      <button class='sub'>Submit</button>
    </form>
  </body>

</html>

$(function(){

  $('.file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(name)) {              
      alert('You must select an image file only');              
    }
    if (size > 5000000) {
      alert('File size must be less than 5 Megabytes');  
    }
    if (size <= 0) {
      alert('File size must be larger than 0');  
    }

    console.log(file, name);

  });


  $('.sub').click(function() {

    $('.file').each(function(index, el) {
      console.log('Input ' + el);
    });

  });

});