Question

我希望上传多个带文字的图片。如果我上传多个文件，它只采用一个文件。

HTML

这是我的HTML代码;我为数组存储添加了[]这个符号

<div style="margin-bottom: 25px" class="input-group input_fields_wrap">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i> 
</span>
<input type="text" class="form-control" placeholder="Qualification" id="qualification" name="qualification[]"/> 

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="file" name="myfiles[]" id="myfiles"> 

<img class="add_field_button" src="images/plus.png" width="40" height="40"/>  
<input type="submit" name="submit" id="submit" value="SUBMIT" />            
</div>
<div id="loadedfiles">

    </div>

脚本

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" placeholder="Qualification" id="qualification" name="qualification[]"/><input type="file" name="myfiles[]" id="myfiles"><img class="remove_field" src="images/minus.png" width="30" height="30"/></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})



$('#submit').on("click", function() {
        var myfiles = document.getElementById("myfiles");
        var files = myfiles.files;

        var myqualification = document.getElementById("qualification");
        var qualification = myqualification.value;

        var data = new FormData();

        for (i = 0; i < files.length; i++) {
            data.append('file' + i, files[i]);
            //data.append('text' + i, text[i]);
        }

        $.ajax({
            url: 'load.php', 
            type: 'POST',
            contentType: false,
            data: data,
            processData: false,
            cache: false
        }).done(function(msg) {
            $("#loadedfiles").append(msg);
        });
    });

});

PHP

<?php
$path="myfiles/";//server path
foreach ($_FILES as $key) {
    if($key['error'] == UPLOAD_ERR_OK ){
        $name = $key['name'];
        $temp = $key['tmp_name'];
        $size= ($key['size'] / 1000)."Kb";
        move_uploaded_file($temp, $path . $name);
        echo "
            <div>
                <h12><strong>File Name: $name</strong></h2><br />
                <h12><strong>Size: $size</strong></h2><br />
                <hr>
            </div>
            ";
    }else{
        echo $key['error'];
    }
  }
?>

当我使用此代码并单击提交时，我只获得了一次上传。我似乎无法纠正这一点。

如何使用jQuery从html中的数组上传多个文件？

0 个答案: