4

我正在努力使用 jquery 文件上传插件，只要我在输入字段中选择文件，就会上传我的文件。

我想要一个上传文件的自定义提交按钮..

我怎样才能做到这一点？

标记：

<span>Add File</span>
<input id="fileupload" type="file" multiple="" data-url="upload.ashx" name="files[]" />

<label for="file_name">Name:</label>
<input type="text" name="file_name" id="file_name" />

<input type="button" id="uploadFileBtn" value="Upload" />

Javascript： 

$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data) {
    alert("success");                               
}
});
4

3 回答 3

0

解决方案

fileupload 有一个 ADD 事件，一旦选择文件就会触发。我在 ADD 事件中编写了单击事件，从而覆盖了默认行为。

经过测试，它按预期工作。

解决方案 2 - Jquery 表单插件

经过一番研究，我找到了一种更好的方法来处理 ajax 文件上传。我正在使用位于以下位置的 Jquery 表单插件： http: //www.malsup.com/jquery/form/

它的工作方式与常规表单一样，可以处理文件输入。

于 2012-09-01T09:37:42.147 回答
0

您可以通过挂钩添加事件来做到这一点。在那里，您可以阻止上传者执行其默认行为。jquery-file-upload -docs 解释了这一点，但有点难找。

以下内容写在blueimp 基本上传器教程中：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

实际上非常重要的是，您创建的提交按钮不在表单内！

于 2014-12-03T17:47:42.650 回答
0

您的输入是否在同一个表单中？

更改您的代码：

<form id="fileupload" action="someAction" method="POST" enctype="multipart/form-data">
    <span>Add files</span>
    <input type="file" name="files[]" multiple>
    <button type="submit" class="btn btn-primary start">
        <span>Start upload</span>
    </button>
</form>
于 2012-08-30T17:36:07.057 回答