Question

通常，要上传文件，它将分为两步 - 选择一个文件，然后确认上传。我正在上传个人资料图片。由于配置文件pic通常很小，我想通过在文件选择时开始上传文件来减少用户的鼠标点击。请建议好的，也许是常见的方法来实现这一点（我也想了解他们的陷阱，如果有的话）。感谢。

Answer 1

从文件上传字段中选择文件时，将触发change事件。如果没有选择文件（字段被清除），该字段的值将为''。

<form method="post" action="upload.script">
    <input type="file" id="formfile"/>
    <input type="submit" id="formsubmit"/>
</form>

<script type="text/javascript">
    var file= document.getElementById('formfile');
    var submit= document.getElementById('formsubmit');

    // If scripting is available, can auto-submit the form, so no submit
    // button needed.
    //
    submit.parentNode.removeChild(submit);

    // When field is filled in with a filename, submit form
    //
    file.onchange= function() {
        if (this.value!=='')
            this.form.submit();
    };
</script>

这是个好主意吗？可疑的。如果用户不期望它自动提交表单可能会产生负面影响。

Answer 2

您可以使用JQuery在选择时自动将文件发布到服务器...

问题：

如果用户不想选择该文件但文件已经上传到服务器怎么办？

如果上一次发生在文件上传完成之前怎么办？

当用户什么都不做并关闭页面时怎么样？你保留文件多长时间

Answer 3

如果您使用GMail，您会发现他们有一个拖放解决方案，用于将文件附加到电子邮件中。从桌面拖动到预定义区域和wallah。

如果您对使用此功能的用户提供HTML5支持（如果他们保持最新状态，那么大多数都应该支持），那么您可以使用内置于HTML5的拖放功能。

试着看一下：http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

您也可以尝试使用Plupload（http://www.plupload.com/），但这对此可能有点过头了。 Plupload更适用于需要进度动画和分块的较大文件。但是，我知道您可以编写脚本，以便立即启动上载，并在完成后立即重定向。它也可能需要您未设置的服务器端工作。

选择后开始上传文件

3 个答案: