Question

我尝试使用以下代码上传多个文件。但每当我上传第一个输入文件时，响应都会出现在第二个输入文件中，反之亦然。

以下是我的代码：

CSS和脚本：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
    #dropBox{
        border: 3px dashed #0087F7;
        border-radius: 5px;
        background: #F3F4F5;
        cursor: pointer;
    }
    #dropBox{
        max-width: 250px;
        max-height: 50px;
        box-sizing: border-box;
    }
    #dropBox p{
        text-align: center;
        font-size: 16px;
        text-decoration-color: #0087F7;
        font-weight: normal;
    }
    #fileInput{
        display: none;
    }
</style>
<script>
    $(function(){
        //file input field trigger when the drop box is clicked
        $("#dropBox").click(function(){
            $("#fileInput").click();
        });

        //prevent browsers from opening the file when its dragged and dropped
        $(document).on('drop dragover', function (e) {
            e.preventDefault();
        });

        //call a function to handle file upload on select file
        $('input[type=file]').on('change', fileUpload);
    });

    function fileUpload(event){
        //notify user about the file upload status
        $("#dropBox").html(event.target.value+" uploading...");

        //get selected file
        files = event.target.files;

        //form data check the above bullet for what it is
        var data = new FormData();

        //file data is presented as an array
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if(!file.type.match('application/pdf')) {
                //check file type
                $("#dropBox").html("Please choose only PDF file.");
            }else if(file.size > 1048576){
                //check file size (in bytes)
                $("#dropBox").html("Sorry, your file is too large (>1 MB");
            }else{
                //append the uploadable file to FormData object
                data.append('file', file, file.name);

                //create a new XMLHttpRequest
                var xhr = new XMLHttpRequest();

                //post file data for upload
                xhr.open('POST', 'upload.php', true);
                xhr.send(data);
                xhr.onload = function () {
                    //get response and show the uploading status
                    var response = JSON.parse(xhr.responseText);
                    if(xhr.status === 200 && response.status == 'ok'){
                        $("#dropBox").html("File has been uploaded successfully. Click to upload another.");
                    }else if(response.status == 'type_err'){
                        $("#dropBox").html("Please choose a PDF file. Click to upload another.");
                    }else{
                        $("#dropBox").html("Some problem occured, please try again.");
                    }
                };
            }
        }
    }
</script>
<style>
    #dropBoxB{
        border: 3px dashed #0087F7;
        border-radius: 5px;
        background: #F3F4F5;
        cursor: pointer;
    }
    #dropBoxB{
        max-width: 250px;
        max-height: 50px;
        box-sizing: border-box;
    }
    #dropBoxB p{
        text-align: center;
        font-size: 16px;
        text-decoration-color: #0087F7;
        font-weight: normal;
    }
    #fileInputB{
        display: none;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
    $(function(){
        //file input field trigger when the drop box is clicked
        $("#dropBoxB").click(function(){
            $("#fileInputB").click();
        });

        //prevent browsers from opening the file when its dragged and dropped
        $(document).on('drop dragover', function (e) {
            e.preventDefault();
        });

        //call a function to handle file upload on select file
        $('input[type=file]').on('change', fileUploadB);
    });

    function fileUploadB(event){
        //notify user about the file upload status
        $("#dropBoxB").html(event.target.value+" uploading...");

        //get selected file
        files = event.target.files;

        //form data check the above bullet for what it is
        var dataB = new FormData();

        //file data is presented as an array
        for (var i = 0; i < files.length; i++) {
            var fileB = files[i];
            if(!fileB.type.match('application/pdf')) {
                //check file type
                $("#dropBoxB").html("Please choose only PDF file.");
            }else if(fileB.size > 1048576){
                //check file size (in bytes)
                $("#dropBoxB").html("Sorry, your file is too large (>1 MB");
            }else{
                //append the uploadable file to FormData object
                dataB.append('file', fileB, fileB.name);

                //create a new XMLHttpRequest
                var xhrB = new XMLHttpRequest();

                //post file data for upload
                xhrB.open('POST', 'uploadB.php', true);
                xhrB.send(dataB);
                xhrB.onload = function () {
                    //get response and show the uploading status
                    var responseB = JSON.parse(xhrB.responseText);
                    if(xhrB.status === 200 && responseB.status == 'ok'){
                        $("#dropBoxB").html("File has been uploaded successfully. Click to upload another.");
                    }else if(responseB.status == 'type_err'){
                        $("#dropBoxB").html("Please choose a PDF file. Click to upload another.");
                    }else{
                        $("#dropBoxB").html("Some problem occured, please try again.");
                    }
                };
            }
        }
    }
</script>

HTML：

<div class="container">
    <h2>Ajax File Upload using jQuery and PHP</h2>
    <form>
        <div id="dropBox">
            <p>Select file to upload</p>
        </div>
        <input type="file" name="fileInput" id="fileInput" />
    </form>
</div>
<div class="container">
    <h2>Ajax File Upload using jQuery and PHP</h2>
    <form>
        <div id="dropBoxB">
            <p>Select file to upload</p>
        </div>
        <input type="file" name="fileInputB" id="fileInputB" />
    </form>
</div>

先谢谢你们！

我尝试使用以下代码上传多个文件。但每当我在第一个输入文件中上传时，响应都会出现在第二个输入文件中，反之亦然。

以上是我的代码：

Answer 1

将您的更改事件更改为以下内容：

$('input[name="fileInput"]').on('change', fileUpload);
$('input[name="fileInputB"]').on('change', fileUploadB);

使用多个输入文件上传JSON文件

1 个答案: