Question

这就是我原来的......

$('#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');  
  }
});

然后转向AJAX部分......

  var file_data = $('#file').prop('files')[0];  
  var form_data = new FormData();

在我的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);
}

这完美无缺，不是我想要继续添加另外两个要上传的文件。我只是不确定如何修复它。

这是我到目前为止所做的，但我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');  
  }
});

我不知道如何编辑AJAX部分以及PHP部分以添加2个额外文件。

Answer 1

以下是使用类为多个输入元素重用相同的javascript的示例：

HTML：

  <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>

的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);
    });

  });

});

看到它在plunkr工作：

http://plnkr.co/edit/Bt2pE26VYtY4bmWIUaXc?p=preview

move_upload_file包含多张图片

1 个答案: