jQuery AJAX文件上传PHP


159

我想在我的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”的文件夹,具有“用户”和“ IIS_users”的更改权限。

当我选择具有文件格式的文件并按下上载按钮时,第一个警报将返回“ [object FormData]”。第二个警报不会被调用,“上传”文件夹也为空!

有人可以帮助我找出问题所在吗?

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



一切对我都有效,也许这是您的PHP代码?
Korikulum 2014年

此表单没有其他“连接”的内容。你用我的php代码是什么意思?
user2355509 2014年

我的意思是,您的代码有效,也许问题出在服务器端代码中。
Korikulum 2014年

执行AJAX脚本时是否得到500错误代码?那将表明这是服务器端错误。另外:确保在调试时将PHP文件的响应输出到控制台。这样,如果您的PHP代码引发错误,您就知道发生了什么。
Diederik 2014年

Answers:


285

您需要在服务器上运行的脚本,以将文件移至上载目录。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
        }
     });
});

现在,对于服务器端脚本,在这种情况下使用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']);
    }

?>

另外,有关目标目录的几件事:

  1. 确保您具有正确的服务器路径,即,从PHP脚本位置开始,到uploads目录的路径是什么,以及
  2. 确保它是可写的

还有关于upload.php脚本中move_uploaded_file使用的PHP函数的一些知识

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_filesizeAND post_max_size配置值,并确保您的测试文件不超过两个。以下是一些帮助您检查PHP配置以及如何设置max filesize和post settings的帮助


嘿,BloodyKnuckles!谢谢,我认为这是一件大事,我误解了。因此,我添加了php文件,而现在我更加靠近了。第二个警报也会弹出!但该文件夹仍为空。
user2355509 2014年

嗯,表单输入名称“ sortpic”在form_data.append函数中更改为“ file” 。因此,我更改了PHP脚本以反映新的表单输入名称。我也将PHP脚本响应放入了ajax成功警报中,以帮助进行调试。
bloodyKnuckles 2014年

1
好友,它给我的错误未定义索引文件位于$_FILES['file']
Hendry Tanaka

1
@partho,代码prop('files')[0]访问打算上传到服务器的本地文件。如果您需要更多说明,请查找jQuery函数“ prop”和“ html5文件上载”。
bloodyKnuckles 2015年

1
我解决了这个问题,原因是文件大小太大。
罗恩·托尔南贝(Ron tornambe)'16

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

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

0

这是用于接收更新文件的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)做什么?总是评估为真,所以没用,不是吗?另外,您还有额外的好处。
Mr.Web

我帮你修好了 :)
Mr.Web

0

使用纯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)

文件名自动包含在请求中,服务器可以读取,“内容类型”自动设置为“多部分/表单数据”。这是带有错误处理和其他json发送功能的更完善的示例


-1

结合使用Materialise的Jquery Ajax最佳文件上传 单击此处下载

选择图像时,图像将在base 64中转换,您可以将其存储到数据库中,因此重量也很轻。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.