Question

<div class="control-group">
   <label class="control-label" for="inputEmail">Image</label>
   <div class="controls">
    <input type="file" value="Browse" name="image" id="image" />
    <span style="color: #61625F; font-weight: bolder;"  class="sixth"></span>
   </div>
</div>

下面的ajax代码

$("#reg").click(function() {

        $.ajax({

            url: "process_service_person_register.php",
            type: "post",
                        data: "image": $("#image").val()}, 
                       });

我将如何将图像发送到＆＃34;处理文件＆＃34;

Answer 1

您必须使用FormData对象。

<script>
if ("FormData" in window)
{
    var fd = new FormData();
    fd.append('file', $('#image')[0].files[0]);

    $.ajax({
               url: "process_service_person_register.php",
               data: fd,
               processData: false,
               contentType: false,
               type: 'POST',
               success: function(result) {
                   console.log(result);
               }
           });
}
else
{
    console.log('sorry, FormData object is not available.');
}
</script>

如果没有FormData，您将不得不像使用hidden iframe方法

一样上学

Answer 2

当我通过ajaxform发布时，这是我的php页面

<?php
include('phpfunc.php');
$path = "images/news/";
$utime = time();
$valid_formats = array("jpg", "png", "bmp","jpeg","gif");

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
    $name = strtolower($_FILES['uploadnews']['name']);
    if(strlen($name)){
        $extpos = strrpos($name, '.', -1);
$ext = substr($name,$extpos+1);
        if(in_array($ext,$valid_formats)){
                $actual_image_name = $utime.".".$ext;
                $fpath = $path.$actual_image_name;
                $tmp = $_FILES['uploadnews']['tmp_name'];

                if(move_uploaded_file($tmp, '../'.$fpath)){
                    echo $fpath;
                }else{
                    echo "failed";
                }

        }else{
            echo "Invalid file format.."; 
        }
    }else{
        echo "Please select image..!";
    }
    exit;
}
?>

Answer 3

无法使用AJAX上传文件

但是，您可以使用隐藏的Iframe模仿AJAX的行为（其他方式存在 - 但这是新旧浏览器最兼容的方式）

例如：

这是你的表格：

<form target="upload_frame" action="upload_handler.php" method="POST" enctype="multipart/form-data">
    <div class="control-group">
       <label class="control-label" for="inputEmail">Image</label>
       <div class="controls">
        <input type="file" value="Browse" name="image" id="image" />
        <span style="color: #61625F; font-weight: bolder;"  class="sixth"></span>
       </div>
    </div>
</form>

现在，您的页面中应该有一个隐藏的IFrame，并将其命名为upload_frame

<iframe name="upload_frame" id="upload_frame" width="1" height="1" frameborder="no" ></iframe>

在upload_handler.php或任何想要处理上传请求的文件中，您应输出类似

的内容

<script type="text/javascript">
    window.parent.onUploadCallback(callback_data);
</script>

这会在原始页面JavaScript上调用onUploadCallback功能。

callback_data参数最好是JSON序列化，因此您可以在函数内部将其用作本机JavaScript对象。

例如：

function onUploadCallback（response）{ 如果（response.success）警告（＆＃34;文件上传：＆＃34; + response.file_path）; } else { 警告（＆＃34;上传文件时出错：＆＃34; + response.error_message）; } }

为了使所有东西更通用 - 你应该使用＆＃34; JSONP＆＃34;喜欢风格和传递＆＃34;回调＆＃34;带有您要调用的函数名称的upload_handler.php参数。然后将其作为hidden字段<input type="hidden" name="callback" value="window.parent.onSuccessCallback" />

添加到表单中

在所有描述之后 - 我的真实建议是 - 使用已经制作的jQuery库来执行任务

如何在php中使用ajax上传图片

3 个答案: