如何在ajax调用中传递输入类型文件数据 [英] how to pass input type file data in ajax call

问题描述

我有我的表格

<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>

以下代码用于通过调用self(同一文件)来上传图片(这些代码来自

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/)

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

现在，我想使用ajax进行此操作.如何将文件数据传递到处理文件，以便可以使用类似的

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

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

推荐答案

这是不可能的.

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

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

可接受的解决方法是将文件发布到后台隐藏的iframe中(因此看起来像ajax).此处的解决方案是找到您选择的"ajax文件上载"库，然后使用该库上载文件.

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

这篇关于如何在ajax调用中传递输入类型文件数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！