单个文件输入的多个文件上传操作 PHP/JS

Question

我想在单个文件上传表单提交中上传来自不同文件夹的不同图像。当我在单击提交按钮之前第二次单击上传按钮时，文件输入字段将替换为最新的选择。

是否可以在单击提交之前附加选择。

我的JS代码显示了所有选中的文件。但只提交最后的选择

这是我的 HTML

<form name="status-form" id="status-form" method="post" enctype="multipart/form-data">
   <input type='file' name='file1[]' id="upload-image" multiple />
   <input type='hidden' name='file2' value="aaaaaaaa" />
   <div id="upload-img">
     <output id="list"></output>
   </div>
   <br/>  
   <button type="submit" name="submit" class="btn btn-info" id="status-btn">Send It!</button>
</form>

这是我的 JS

var allImages = [];
if (window.FileReader) {
  document.getElementById('upload-image').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(evt) {
   var files = evt.target.files;

   for (var i = 0; i < files.length; i++) {
       var f = files[i];
       var reader = new FileReader();
       reader.onload = (function(f) {
           return function(e) {
               document.getElementById('list').innerHTML = document.getElementById('list').innerHTML + ['<img src="', e.target.result,'" title="', f.name, '" width="150" class="image-gap" />'].join('');
           };
       })(f);
     reader.readAsDataURL(f);
   }

   var formData = $('form').serializeArray(); 
   console.log(formData);

   $.ajax({
       type:'POST',
       url: 'temp.php',
       data:formData,
       success:function(data){
           //code here
       },
       error: function(data){
           //code here
       }
   });
   console.log(folder);

   $('#upload-img').addClass('image-div');
}

而我的 PHP 目前只是 var_dump

if (isset($_POST['submit'])) {
   var_dump($_FILES['file1']);
   var_dump($_POST['file2']);
}

Answer 1

你可以试试这个：

Select 文件使用浏览字段
在此浏览字段发生变化时调用方法 (setImage())

并在 setImage() 中：

function setImage(){
 // Get the src value of browse field
 // Create a new hidden browse field with src value of above browse 
 // field
 // And set blank value of src of first one browse field
}

这个想法是你select一个图片n次，上面的方法会在你的html中创建n个隐藏的浏览字段。

例如：如果您select三张图片，那么就会有四个浏览字段。

1 次显示给您
其他三个隐藏

现在按提交，在服务器端你会得到 4 个文件字段，一个是空文件，另外三个是文件。

忽略空的一张，上传其他三张图片。

Answer 2

根据 Rahul 的提示，我成功了。答案在这里

JS 文件

var uploadImage = 0;

$( document ).ready(function() {
    uploadImage = Math.floor(Date.now() / 1000);
});

if (window.FileReader) {
  document.getElementById('upload-image').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0; i < files.length; i++) {
        var f = files[i];
        var reader = new FileReader();
        reader.onload = (function(f) {
            return function(e) {
                document.getElementById('list').innerHTML = document.getElementById('list').innerHTML + ['<img src="', e.target.result,'" title="', f.name, '" width="150" class="image-gap" />'].join('');
                $('<input>').attr({
                    type: 'hidden',
                    id: uploadImage++,
                    name: uploadImage++,
                    value: e.target.result
                }).appendTo('form');
                console.log(e.target.result);
            };
        })(f);
      reader.readAsDataURL(f);
    }

    $('#upload-img').addClass('image-div');
}

PHP代码

if (isset($_POST['submit'])) {
    define('UPLOAD_DIR', 'images/');
    $patterns = array('/data:image\//', '/;base64/');

    foreach ($_POST as $key => $value) {
      if (preg_match('/^(0|[1-9][0-9]*)$/', $key)) {
        $imageData = explode(',', $value, 2);
        $type = preg_replace($patterns, '', $imageData[0]);;
        if (count($imageData) > 1) {
            $img = str_replace($imageData[0].',', '', $value);
            $img = str_replace(' ', '+', $img);
            $data = base64_decode($img);
            $file = UPLOAD_DIR . uniqid() . '.'.$type;
            $success = file_put_contents($file, $data);
            print $success ? $file : 'Unable to save the file.';
        }

      }
    }
}

HTML代码

<form name="status-form" id="status-form" method="post" enctype="multipart/form-data">
    <input type='file' name='file1[]' id="upload-image" multiple />
    <div id="upload-img">
        <output id="list"></output>
    </div>
    <br/>
    <button type="submit" name="submit" class="btn btn-info" id="status-btn">Send It!</button>
</form>

单个文件输入的多个文件上传操作 PHP/JS

Multiple File Upload actions for a single File Input PHP/JS

javascript

php

image-uploading

multifile-uploader