Question

我有最简单的图片上传案例。当我将它作为一个单独的例子运行时它就可以工作了。当我将相同的.js代码合并到我的项目的javascript代码中，并尝试从我的html页面上传（.js和.php代码相同，id和名称调整等）时，它不起作用。

HTML：

<html>
<head>
    <title>HTML5 File API</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div id="main">
        <h1>Upload Your Images</h1>
            <input type="file" name="images" id="images"/>
            <input type="submit" id="submitImages" onclick="submitImages()">

    <div id="response"></div>
        <ul id="image-list">

        </ul>
    </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="upload.js"></script>
</body>
</html>

的javascript：

function submitImages(){

    if (window.FormData) {
        formdata = new FormData();
    }

    file = document.getElementById('images').files[0];

    if (!!file.type.match(/image.*/)) {
        if (formdata) {
            formdata.append("images[]", file);
        }
    }   

    if (formdata) {
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res); 
            }
        });
    }   

}

PHP：

<?php

foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name = $_FILES["images"]["name"][$key];
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
    }
}

echo "<h2>Successfully Uploaded Images</h2>";

?>

当我尝试从项目上传时从服务器获取的消息：

POST-->POST:
Source
-----------------------------2656620091882 Content-Disposition: form-data; name="images[]"; filename="dock_2.jpg" Content-Type: image/jpeg ÿØÿáa"Exif��MM�*�� 
etc.

POST-->RESPONSE:
<br />
<b>Notice</b>:  Undefined index: images in <b>C:\XAMPP\htdocs\Projects\DockMapper\add_edit_upload_images.php</b> on line <b>3</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>C:\XAMPP\htdocs\Projects\DockMapper\add_edit_upload_images.php</b> on line <b>3</b><br />
<h2>Successfully Uploaded Images</h2>

似乎有些东西被发送到服务器，但它没有在服务器上收到。当我运行：print_r（$ _ FILES）;数组是空的。我花了两天时间在这上面，我找不到问题。有什么建议？非常感谢。

Answer 1

使用它例如 Jquery

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data)
    alert(form_data);                             
    $.ajax({
                url: 'upload.php',
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function(data){
                    alert(data); 
                }
     });
});

PHP

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

Answer 2

好的，这就是问题所在：在我的项目的html文件中，jquery包含在HEADER中，包含以下行：

<head>
    ...
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    ...
</head>

当我删除这些行时，它只在FOOTER中包含以下ajax库：

<html>
<body>
  ...
</body>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  ...
</html>

PHP图像上传：作为一个孤立的示例，但不是我的项目代码

2 个答案: