Question

到目前为止，我发现用PHP上传文件的所有示例都涉及：

选择文件
按提交按钮上传（使用帖子）。

有没有办法在选择文件后立即提交文件，这样用户就不必点击“上传”按钮了？我知道这是可能的。查看Dropbox的网站或Google云端硬盘。不过我不确定他们是否使用PHP。

Answer 1

你有两种方式：

用户jquery：

<form  id="frm" action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /><br/>
</form>

<script type="text/javascript">
<!--
  $(document).ready(function(){
     $('#file').change(function(){
           $('#frm').submit();
     });
  })
-->
</script>

使用flash uploader。

我希望能帮到你......

Answer 2

出于安全原因，HTML文件上传按钮不可编写脚本。

Answer 3

你想要的是作为HTML5 http://www.w3.org/TR/FileAPI/一部分的文件API，它包含通过AJAX请求上传数据的功能等。

不幸的是，浏览器支持仍然不稳定，因此您可以在Chrome或Firefox上实现Dropbox等拖放UI。你需要为IE备份。

http://www.html5rocks.com/en/features/file_access

Answer 4

无论浏览器不兼容，代码都将解决您的问题。我经常使用它。

function startUpload() {
    var file_button = document.createElement('input');
    file_button.type = "file";
    file_button.id = "file_button1";
    file_button.style.display = "none";
    file_button.style.position = "absolute";
    file_button.onchange = function() {
        var form_data = new FormData();
        var file = jQuery(this).get(0).files[0];
        form_data.append('file', file);
        form_data.append('type', type);
        form_data.append('name', 'fileToUpload');
        setTimeout(function() {
            jQuery.ajax({
                url: "/uploadfile.php",
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                xhr: function() {
                    var myXhr = jQuery.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', custom_progress, false);
                    }
                    return myXhr;
                },
                success: function(response) {
                    console.log(response);
                }
            });
        }, 1000);
    };
    jQuery(document.body).append(file_button);
    file_button.click();
    jQuery("#file_button1").remove();
}
function custom_progress(e) {
    if (e.lengthComputable) {
        var x = (e.loaded / e.total) * 100;
        jQuery("#progress").html(x + "%");
    }
}

您的服务器端代码看起来像这样

<?php

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if ($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
} else {
    echo "File is not an image.";
    $uploadOk = 0;
}

在Ajax file upload and progress

处找到此解决方案

使用单个按钮上载文件

4 个答案: