jQuery 如何在ajax调用中传递输入类型文件数据

how to pass input type file data in ajax call

提问by ptamzz

I've my form

我有我的表格

<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    Photo <input type="file" name="image" size="30" />
          <input type="submit" name="upload" value="Upload" />
</form>

The following code is used to upload an image by calling self (the same file) (the codes is from http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/)

以下代码用于调用self（同一个文件）上传图片（代码来自http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/）

if (isset($_POST["upload"])) { 
    //Get the file information
    $userfile_name = $_FILES['image']['name'];
    $userfile_tmp = $_FILES['image']['tmp_name'];
    $userfile_size = $_FILES['image']['size'];
    $userfile_type = $_FILES['image']['type'];
    $filename = basename($_FILES['image']['name']);
    $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));

    //Only process if the file is a JPG, PNG or GIF and below the allowed limit
    if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {

        foreach ($allowed_image_types as $mime_type => $ext) {
            //loop through the specified image types and if they match the extension then break out
            //everything is ok so go and check file size
            if($file_ext==$ext && $userfile_type==$mime_type){
                $error = "";
                break;
            }else{
                $error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
            }
        }
        //check if the file size is above the allowed limit
        if ($userfile_size > ($max_file*1048576)) {
            $error.= "Images must be under ".$max_file."MB in size";
        }

    }else{
        $error= "Select an image for upload";
    }
    //Everything is ok, so we can upload the image.
    if (strlen($error)==0){

        if (isset($_FILES['image']['name'])){
            //this file could now has an unknown file extension (we hope it's one of the ones set above!)
            $large_image_location = $large_image_location.".".$file_ext;
            $thumb_image_location = $thumb_image_location.".".$file_ext;

            //put the file ext in the session so we know what file to look for once its uploaded
            $_SESSION['user_file_ext']=".".$file_ext;

            move_uploaded_file($userfile_tmp, $large_image_location);
            chmod($large_image_location, 0777);

            $width = getWidth($large_image_location);
            $height = getHeight($large_image_location);
            //Scale the image if it is greater than the width set above
            if ($width > $max_width){
                $scale = $max_width/$width;
                $uploaded = resizeImage($large_image_location,$width,$height,$scale);
            }else{
                $scale = 1;
                $uploaded = resizeImage($large_image_location,$width,$height,$scale);
            }
            //Delete the thumbnail file so the user can create a new one
            if (file_exists($thumb_image_location)) {
                unlink($thumb_image_location);
            }
        }
        //Refresh the page to show the new uploaded image
        header("location:".$_SERVER["PHP_SELF"]);
        exit();
    }
}

Now I want to do this using ajax. How do I pass the file data to the processing file so that I can use something like

现在我想使用ajax来做到这一点。如何将文件数据传递给处理文件，以便我可以使用类似

$('#uploadBtn').live('click', function(){
        var data = "upload=true";
        $.ajax({
            type: "POST",
            url: "process.php",
            data: data,
            cache: false,
            success: function(data){
            }
        });
    });

采纳答案by Tejs

This is impossible.

这是不可能的。

Sending data via an ajax call is not supported from browsers.

浏览器不支持通过 ajax 调用发送数据。

The accepted workaround is to post the file in a hidden iframein the background (so it looks like ajax). The solution here is to find your 'ajaxfile upload' library of choice and use that to upload the file.

接受的解决方法是将文件发布在隐藏iframe的背景中（因此看起来像ajax）。这里的解决方案是找到您选择的“ajax文件上传”库并使用它来上传文件。

回答by sanwrit

Well i have tried something like this with firefox and chrome:

好吧，我已经用 Firefox 和 chrome 尝试过这样的事情：

<form id="guestForm" action="<?php echo $_SERVER["PHP_SELF"];?>" method="POST" enctype="multipart/form-data">
   <input type="file" id="fileInput" name="fileInput" />
   <input type="button" value="submit" id="ajaxSubmit" />
</form>
<script type="text/javascript">
    $(function () {
        $("#ajaxSubmit").click( function () {
            var fd = new FormData();

            fd.append( "fileInput", $("#fileInput")[0].files[0]);
            $.ajax({
                url: 'process.php',
                type: 'POST',
                cache: false,
                data: fd,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $("#output").html("Uploading, please wait....");
                },
                success: function () { 
                    $("#output").html("Upload success.");
                },
                complete: function () {
                    $("#output").html("upload complete.");
                },
                error: function () {
                    alert("ERROR in upload");
                }
            });

        });
    });
</scirpt>

I originally had this code in tandem with Java as the server side code. Although, i don't see why this wouldn't work with PHP. But, your question is how to pass input type file data in an ajax call. So this is how i did it.

我最初将这段代码与 Java 一起作为服务器端代码。虽然，我不明白为什么这不适用于 PHP。但是，您的问题是如何在 ajax 调用中传递输入类型文件数据。所以这就是我做到的。

回答by Oleg Hmelevschi

Try this one:

试试这个：

$.ajax( {
  type: 'POST',
  url: 'process.php',
  data: new FormData( this ),
  processData: false,
  contentType: false,
  cache: false,
  success: function(data){
  }
});