问题：

jQuery AJAX文件上传PHP

陶英达

2023-03-14

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

这是我的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]”。第二个警报未被调用，“上载”文件夹也为空！？

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

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

共有3个答案

文建业

2023-03-14

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

萧嘉茂

2023-03-14

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

洪念

2023-03-14

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

您的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。

上载php：位于服务器上并在服务器上运行的php脚本，它将文件定向到uploads目录：

<?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脚本位置开始，上传目录的路径是什么，以及

确保它是可写的。

还有一点关于PHP函数move_uploaded_file，用于upload.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']
);

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

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

最后，请注意您的PHPupload_max_filesize和post_max_size配置值，并确保您的测试文件不超过这两个值。这里有一些关于如何检查PHP配置以及如何设置最大文件大小和post设置的帮助。

类似资料：

PHP实现文件上传和多文件上传

本文向大家介绍PHP实现文件上传和多文件上传，包括了PHP实现文件上传和多文件上传的使用技巧和注意事项，需要的朋友参考一下在PHP程序开发中，文件上传是一个使用非常普遍的功能，也是PHP程序员的必备技能之一。值得高兴的是，在PHP中实现文件上传功能要比在Java、C#等语言中简单得多。下面我们结合具体的代码实例来详细介绍如何通过PHP实现文件上传和多文件上传功能。要使用PHP实现文件上传功能，
PHP 文件上传

主要内容：创建一个文件上传表单,创建上传脚本,上传限制,保存被上传的文件通过 PHP，可以把文件上传到服务器。本章节实例在 test 项目下完成，目录结构为：源码下载创建一个文件上传表单允许用户从表单上传文件是非常有用的。请看下面这个供上传文件的 HTML 表单：将以上代码保存到 form.html 文件中。有关上面的 HTML 表单的一些注意项列举如下： <form> 标签的 enctype 属性规定了在提交表单时要使用哪种内容类型。在表单需要二进制数
文件上传

在Yii里上传文件通常使用 yii\web\UploadedFile 类，它把每个上传的文件封装成 UploadedFile 对象。结合 yii\widgets\ActiveForm 和 models，你可以轻松实现安全的上传文件机制。创建模型和普通的文本输入框类似，当要上传一个文件时，你需要创建一个模型类并且用其中的某个属性来接收上传的文件实例。你还需要声明一条验证规则以验证上传的文件
文件上传

大多数的 Web 应用都不可避免的，会涉及到文件上传。文件上传，不过是一种适配 HTTP 输入流的方式。为此，Nutz.Mvc 内置了一个专门处理文件上传的适配器 org.nutz.mvc.upload.UploadAdaptor 这个适配器专门解析形式为 <form target="hideWin" enctype="multipart/form-data" method="post">
上传文件

哦，上传文件可是个经典的好问题了。文件上传的基本概念实际上非常简单，他基本是这样工作的: 一个 <form> 标签被标记有 enctype=multipart/form-data ，并且在里面包含一个 <input type=file> 标签。服务端应用通过请求对象上的 files 字典访问文件。使用文件的 save() 方法将文件永久地保存在文件系统上的某处。一点点介绍让我们建立一
①. 文件上传

Django提供了一些类实现管理数据分页，这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int)：返回分页对象，参数为列表数据，每面数据的条数属性 count：对象总数 num_pages：页面总数 page_range：页码列表，从1开始，例如[1, 2, 3, 4] 方法 page(num)：下标以1开始，如果提供的页码不存在
文件上传

SDK 详细代码可参考sdk-java模块代码，位于单元测试文件中 /** * 上传文件，读取本地文件 * * @throws IOException */ @Test public void testUpload() throws IOException { FileUploadRequest request = new F
文件上传

请求接口时带上文件客户端调用 DemoFileUploadRequest request = new DemoFileUploadRequest(); DemoFileUploadModel model = new DemoFileUploadModel(); model.setRemark("上传文件参数"); request.setBizModel(model); List<Upload

jQuery AJAX文件上传PHP

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档