2

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

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

这里有一些： 示例 1 示例 2。

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

4

4 回答 4

4

你有两种方式：

  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>
  1. 使用 Flash 上传器。

我希望能帮助你...

于 2012-12-03T18:17:19.380 回答
1

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

于 2012-12-03T17:49:49.853 回答
0

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

不幸的是，浏览器支持仍然参差不齐，所以虽然您可以在 Chrome 或 Firefox 上实现像 Dropbox 这样的拖放 UI。你需要有一个 IE 的后备。

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

于 2012-12-03T17:52:45.090 回答
0

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

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 文件上传和进度处找到此解决方案

于 2016-06-27T06:49:45.747 回答