Question

我试图从olanod answer重新创建此指南但不适合我。

我想使用AJAX上传文件，但我得到一个空的$ _POST：

<form enctype="multipart/form-data">
        <input type="file" name="file"> 
        <br>
        <input type="text" name="as" value="asd">
        <!--<button type='button' class="add_more">Add More Files</button>-->
<input type="button" value="Upload" />
</form>

这是我的脚本（从olanod answer复制粘贴）：

<script>
        $(document).ready(function(){
          /*  $('.add_more').click(function(e){
                e.preventDefault();
                $(this).before("<input name='upfile[]' type='file'/><br>");
            });*/

            $(':button').on('click', function() 
            {
                $.ajax({
                    // Your server script to process the upload
                    url: 'ajax.php',
                    type: 'POST',

                    // Form data
                    data: new FormData($('form')[0]),

                    // Tell jQuery not to process data or worry about content-type
                    // You *must* include these options!
                    cache: false,
                    contentType: false,
                    processData: false,

                    // Custom XMLHttpRequest
                    xhr: function() {
                        var myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) {
                            // For handling the progress of the upload
                            myXhr.upload.addEventListener('progress', function(e) {
                                if (e.lengthComputable) {
                                    $('progress').attr({
                                        value: e.loaded,
                                        max: e.total,
                                    });
                                }
                            } , false);
                        }
                        return myXhr;
                    },
                });
            });
        });
</script>

正如我所说，我想看看我正在采取什么，这是我的php文件的结果：

array（1）{ [＆＃34;如＆＃34;] =＆GT; string（3）＆＃34; asd＆＃34; }

我返回了一个文本字段以确定。

P.D：对不起我的英文。我希望你能理解我，我会尽我所能！

Answer 1

您可以使用此方法上传文件

html-

<input type="file" class="btn btn-default" name="img2" id="img2" />

javascript-

var formData = new FormData();
          formData.append('Photo', $('#img2')[0].files[0]);
          $.ajax({
              url: 'ImgUpload.php',
              data: formData,
              type: "POST",
              // THIS MUST BE DONE FOR FILE UPLOADING
              contentType: false,
              processData: false,
              
          }).done(function( msg ) {

Answer 2

Check this one..

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Ajax Image Upload</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="../js/jquery-3.1.1.min.js"></script>
            <script src="../js/validator.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>
        <body>

            <div class="container">
                <span id="msg"></span>
                <h2>Image Upload Form</h2>
                <form data-toggle="validator" role="form" name="image-form" method="post" enctype="multipart/form-data" id="my-form" action="<?php $_SERVER['PHP_SELF']; ?>">
                    <div class="form-group">
                        <label for="image">Image:</label>
                        <input type="file" id="image"  name="image[]" data-error="Upload Image" multiple required>
                        <div class="help-block with-errors"></div>
                    </div>    
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>

        </body>
    </html>


    <script type="text/javascript">
       $(document).ready(function (e) {
            $("#my-form").on('submit', (function (e) {
                e.preventDefault();
                var formData = new FormData(this);            
                    $.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        success: function (data) {
                            $("#my-form")[0].reset();
                            //alert(data);
                            $("#msg").html(data);
                        },
                    });

                return false; //IE
            }));
        });
    </script>

Answer 3

正如@ user2486所说，

你应该使用$ _FILES而不是$ _POST - user2486

他是对的。

使用AJAX上传文件无法正常工作

3 个答案: