样式输入文件和自动提交

时间:2009-04-27 10:19:01

标签: javascript jquery css

我正在尝试使用单个文本链接,用户点击该链接并询问用户他/她想要上传哪个文件,然后自动将其发布到表单。我怎样才能实现同样的目标?我知道我必须设置文件输入的样式但是如何让它自动发布到文件选择上?

非常感谢

4 个答案:

答案 0 :(得分:12)

在页面中嵌入javascript为bad practice

使用选择器将提交添加到项目。这使您可以按照要求将功能添加到基本链接。

<强> HTML

<form id="myForm">
    <a id="uploadLink" href="#">Upload file</a>
</form>

<强>的jQuery

$(document).ready(function() {
    $("#uploadLink").click(function() {
        $("#myForm").submit();
    }
});

添加资源

以下是jQuery Form plugin的链接。

还有multi-file upload plugin for jQuery

答案 1 :(得分:10)

您可以调用表单的提交方法。它会将您的页面提交给服务器,您可以在请求的Files集合中获取该文件。

您必须在“file”元素的“onchange”事件上调用表单的submit()方法。

<input type="file" onchange="formname.submit();" id="f" />

编辑:Try this.

答案 2 :(得分:2)

好吧,jQuery可能并不总是答案,但我现在正在滥用它 - 主要是选择器和实时内容 - 无论如何使用jQuery,对你的问题的最佳解决方案如下:

$('input[type:"file"]').live('change',function(){
    $(this).parents('form').submit();
});

这基本上使任何输入类型文件自动提交它的父表单 - 有点过分你可以通过将输入类型文件选择器更改为您选择的类来轻松限制它。

你也可以通过不使用直播来使它更轻(我这样做是因为我动态地使用它)

答案 3 :(得分:2)

使用JQuery 1.7+版本:

    //wait for an file input to change anywhere in the document
    $(document).on('change', 'input[type="file"]', function () { 
        $(this).parents('form').submit(); //then submit its parent form
    });