jQuery AJAX 文件上传 PHP答案

【问题标题】：jQuery AJAX file upload PHPjQuery AJAX 文件上传 PHP
【发布时间】：2017-08-25 11:34:49
【问题描述】：

我想在我的 Intranet 页面中实现一个简单的文件上传，尽可能使用最小的设置。

这是我的 HTML 部分：

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

这是我的 JS 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: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

网站根目录下有一个名为“uploads”的文件夹，对“users”和“IIS_users”有修改权限。

当我选择带有文件格式的文件并按下上传按钮时，第一个警报返回“[object FormData]”。第二个警报没有被调用，并且“上传”文件夹也是空的！？

谁能帮我找出问题所在？

下一步应该是用服务器端生成的名称重命名文件。也许有人也可以给我一个解决方案。

【问题讨论】：

请先阅读：stackoverflow.com/questions/166221/…
一切都适合我，也许是你的 PHP 代码？
此表单没有其他任何“关联”。我的 php 代码是什么意思？
我的意思是，您的代码有效，可能问题出在您的服务器端代码中。
您在执行 AJAX 脚本时是否收到 500 错误代码？这将表明这是一个服务器端错误。另外：确保在调试时将 PHP 文件的响应输出到控制台。这样，如果您的 PHP 代码抛出错误，您就知道发生了什么。

标签： javascript php jquery ajax upload

【解决方案1】：

您需要在服务器上运行的脚本将文件移动到上传目录。 jQuery ajax 方法（在浏览器的客户端上运行）将表单数据发送到服务器，然后在服务器上运行的脚本处理上传。

你的 HTML 很好，但是更新你的 JS jQuery 脚本看起来像这样：

（在// <--之后寻找cmets）

$('#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', // <-- point to server-side PHP script 
        dataType: 'text',  // <-- what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // <-- display response from the PHP script, if any
        }
     });
});

现在对于服务器端脚本，在这种情况下使用PHP。

upload.php：位于服务器上并在服务器上运行的 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']);
    }

?>

另外，关于目标目录的一些事情：

确保您拥有正确的服务器路径，即从 PHP 脚本位置开始，上传目录的路径是什么，并且
确保它是可写的。

还有一点关于在 upload.php 脚本中使用的 PHP 函数 move_uploaded_file：

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name'] 是文件上传时的名称。你不必使用它。你可以给文件起任何你想要的名字（服务器文件系统兼容）：

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

最后，请注意您的 PHP upload_max_filesize 和 post_max_size 配置值，并确保您的测试文件不超过任何一个。这里有一些帮助你如何check PHP configuration 和你如何set max filesize and post settings。

【讨论】：

伙计，它给了我$_FILES['file']处的未定义索引文件错误
@partho ，代码 prop('files')[0] 访问用于上传到服务器的本地文件。如果您需要更多解释，请查看 jQuery 函数“prop”和“html5 文件上传”。
我解决了这个问题。原因是文件太大了。
另外..我们不需要使用event.preventDefault() 吗？
这必须是 SO 上的最佳答案

【解决方案2】：

**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}

【讨论】：

【解决方案3】：

使用纯js

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)

文件名自动包含在请求中并且服务器可以读取它，'content-type'自动设置为'multipart/form-data'。这是更完善的示例，包含错误处理和额外的 json 发送

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

【讨论】：

【解决方案4】：

var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

【讨论】：

【解决方案5】：

这是接收上传文件的php文件

<?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        foreach ($_FILES as $file) {
            if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) {
                $files[] = $uploaddir . $file['name'];
            } else {
                $error = true;
            }
        }
        $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
    } else {
        $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST);
    }

    echo json_encode($data);
?>

【讨论】：

if (true) 在做什么？总是评估为真，所以没用，不是吗？你还有一个额外的末端卷曲。
我为你修好了。 :)