使用单个按钮上传文件答案

【问题标题】：Uploading a file with a single button使用单个按钮上传文件
【发布时间】：2012-11-21 05:55:59
【问题描述】：

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

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

这里有几个： Example 1 Example 2.

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

【问题讨论】：

他们可能只是监听对话框字段的更改事件并自己触发提交
^^ 我只是想说 AbstractChaos 说的话... +1
如何触发提交？
好的，我知道了。你们中的任何人都可以添加他们的 cmets 作为答案吗？他们真的很有帮助。
这是 stackoverflow 对这个问题的重复。[stackoverflow 类似问题][1] [1]：stackoverflow.com/questions/1904168/…

标签： html file-upload

【解决方案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 上传器。

希望能帮到你……

【讨论】：

【解决方案2】：

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

【讨论】：

我怀疑您指的是具有“文件”类型的输入元素。在这种情况下，您是对的，如果您还打算通过 javascript 提交关联的表单，某些浏览器不允许使用 javascript 来调用“选择文件”对话框。但是，原始发布者并没有要求这样的解决方案。很明显，发帖人要求在文件被选中后以编程方式上传文件。

【解决方案3】：

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

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

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

【讨论】：

仅供参考，这是一个非常好的基于 jquery 的文件上传框架blueimp.github.com/jQuery-File-Upload
对第三方库不感兴趣，抱歉。
@David 如果你想重新发明轮子，玩得开心。但是有几个基于 javascript 的库已经完全可以满足您的需求。根据您的需要，这对您来说可能不是一个微不足道的项目。在这方面没有任何知识，你显然没有，也会使这对你来说是一个令人沮丧的努力。其中两个大的是 BlueImp 的 jQuery 文件上传器和 Fine Uploader。我坚持后者。

【解决方案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 找到此解决方案

【讨论】：