Javascript jqueryajax文件上传PHP

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

这是我的HTML部分：

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

在网站的根目录中有一个名为“uploads”的文件夹，具有“users”和“IIS_users”的更改权限

当我使用文件表单选择一个文件并按下上载按钮时，第一个警报返回“[object FormData]”。第二个警报未被调用，“上载”文件夹也为空

有人能帮我找出问题所在吗

---

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

您需要一个在服务器上运行的脚本来将文件移动到uploads目录。jQuery

ajax

方法（在浏览器中运行）将表单数据发送到服务器，然后服务器上的脚本处理上传。下面是一个使用PHP的示例

您的HTML很好，但请更新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: '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
        }
     });
});

$\u FILES['file']['name']

是上载的文件的名称。你不必用这个。您可以为文件指定所需的任何名称（与服务器文件系统兼容）：

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

---

最后，请注意您的PHP和配置值，并确保您的测试文件不超过这两个值。这里有一些关于如何使用和如何使用的帮助。

这是接收上传文件的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);
?>

**1。index.php**




$（文档）.ready（函数（）{
$（文档）.on（'change'，'#photo'，function（）{
var属性=document.getElementById（'photo'）。文件[0]；
var image_name=property.name；
var image_extension=image_name.split（'.'）.pop（）.toLowerCase（）；
if（jQuery.inArray（图像扩展名，['gif'，'jpg'，'jpeg'，''）=-1）{
警报（“无效图像文件”）；
}
var form_data=new FormData（）；
表单_data.append（“文件”，属性）；
$.ajax({
url:'upload.php'，
方法：'POST'，
数据：表格数据，
contentType:false，
cache:false，
processData:false，
beforeSend:function（）{
$（'#msg'）.html（'加载…'）；
},
成功：功能（数据）{
控制台日志（数据）；
$（'#msg'）.html（数据）；
}
});
});
});
**2.upload.php**
使用纯js


异步函数saveFile（）
{
设formData=new formData（）；
formData.append（“文件”，sortpicture.files[0]）；
等待获取（'/uploads'，{method:“POST”，body:formData}）；
警报（“工作”）；
}

上传

在单击“上传”之前，请先查看chrome>console>network（在本截图中，我们将看到404）
请先阅读以下内容：一切都适合我，可能是您的PHP代码？此表单没有其他“连接”。我的php代码是什么意思？我的意思是，你的代码可以工作，可能问题出在你的服务器端代码中。在执行AJAX脚本时，你会得到500个错误代码吗？这表明这是一个服务器端错误。另外：确保在调试时，将PHP文件的响应输出到控制台。这样，如果您的PHP代码抛出错误，您就知道发生了什么！谢谢，我想这是一件大事，我误解了。所以我添加了php文件，现在我更接近了。第二个警报也会弹出！但是文件夹仍然是空的。啊，在
form\u data.append
函数中，表单输入名称“sortpic”被更改为“file”。因此，我更改了PHP脚本以反映新的表单输入名称。我还将PHP脚本响应拉入ajax成功警报以帮助调试。伙计，它在
$\u FILES['file']
@partho处给我错误未定义的索引文件，代码属性（'FILES'）[0]访问要上载到服务器的本地文件。如果您需要更多解释，请查看jQuery函数“prop”和“html5文件上载”。我解决了这个问题。原因是文件大小太大。如果（true）
是什么意思？评估总是正确的，所以是无用的，不是吗？你还有一个额外的卷发。我给你修的。：）
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']
);

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

<?
$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);
?>

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);
    }
});

**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" />';
}