jQuery Ajax文件上载

我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上载吗？

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

如果可能，我需要填写数据部分吗？这是正确的方式吗？我只将文件POST到服务器端。

我一直在搜索，但我发现的是一个插件，而在我的计划中，我不想使用它。至少目前是这样。

当前回答

Ajax发布和上传文件是可能的。我使用jQuery$.ajax函数加载文件。我尝试使用XHR对象，但无法在服务器端使用PHP获得结果。

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

如您所见，您必须创建一个FormData对象，该对象为空或来自（serialized？-$（'#yourForm'）.serialize（））现有表单，然后附加输入文件。

以下是更多信息：-如何使用jQuery.ajax和FormData上载文件-通过jQuery上载文件，提供对象FormData，没有文件名，GET请求

对于PHP进程，您可以使用以下内容：

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}

2014-07-24 16:28:42

其他回答

我已经很晚了，但我正在寻找一个基于ajax的图像上传解决方案，我正在寻找的答案在这篇文章中有点分散。我确定的解决方案涉及FormData对象。我组装了一个基本形式的代码。您可以看到它演示了如何使用fd.append（）向表单添加自定义字段，以及如何在完成ajax请求时处理响应数据。

上传html:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

如果您使用php，这里有一种处理上传的方法，包括使用上面html中演示的两个自定义字段。

上传.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

2014-03-24 21:53:43

简单上载表单

<脚本>//表单提交$（“表单”）.submit（函数（evt）｛evt.preventDefault（）；var formData=新的formData（$（this）[0]）；$.ajax美元({url:'fileUpload'，类型：'POST'，data:formData，异步：false，缓存：false，contentType：false，enctype:'多部分/表单数据'，processData:false，成功：函数（响应）{警报（响应）；}});return false；});</script><表单><表><tr><td colspan=“2”>文件上载</td></tr><tr><th>选择文件</th><td><input id=“csv”name=“csv“type=“file”/></td></tr><tr><td colspan=“2”><input-type=“submit”value=“subject”/></td></tr></table></form>

2015-01-19 12:36:33

使用纯js更容易

异步函数saveFile（inp）{let formData=新formData（）；formData.append（“file”，inp.files[0]）；wait-fetch（'/upload/somedata'，｛method:“POST”，body:formData｝）；警报（“成功”）；}<input-type=“file”onchange=“saveFile（this）”>

在服务器端，您可以读取请求中自动包含的原始文件名（和其他信息）。您不需要将标题“Content-Type”设置为“multipart/form-data”。浏览器将自动设置它此解决方案应适用于所有主要浏览器。

下面是更详细的代码片段，包括错误处理、超时和额外的json发送

异步函数saveFile（inp）{让用户＝{name:'john'，年龄：34}；let formData=新formData（）；let photo=inp.files[0]；formData.append（“照片”，照片）；formData.append（“用户”，JSON.stringify（用户））；const ctrl=新建AbortController（）//超时setTimeout（（）=>ctrl.art（），50000）；尝试{let r=等待获取（'/upload/image'，｛method:“POST”，body:formData，signal:ctrl.signal｝）；console.log（'HTTP响应代码：'，r.status）；警报（“成功”）；}捕获（e）{console.log（'休斯顿我们有问题…：'，e）；}}<input-type=“file”onchange=“saveFile（this）”><br><br>在选择文件之前，打开chrome控制台>网络选项卡以查看请求详细信息。<br><br><small>因为在本例中，我们将请求发送到https://stacksnippets.net/upload/image响应代码当然是404</小>

2019-07-05 09:52:53

可以，只需使用javascript获取文件，确保将文件作为数据URL读取。解析出base64之前的内容，以实际获得base64编码的数据，然后如果您使用php或任何后端语言，您可以解码base64数据并保存到如下所示的文件中

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);


PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

当然，你可能会想做一些验证，比如检查你正在处理的文件类型之类的事情，但这是一个想法。

2014-10-12 05:57:19