带有blueimp jquery文件上载的自定义文件上载按钮

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

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

我想要一个cusom提交按钮来上传文件

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

我该怎么做

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

标记：

<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" />

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

---

您的输入是否在同一表格中

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

更改您的代码：

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

<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>

添加文件
开始上传

解决方案

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

fileupload有一个ADD事件，在选择文件后立即触发。我在ADD事件中编写了click事件，从而覆盖了默认行为

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

经过测试，工作正常

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

解决方案2-Jquery表单插件

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

经过一些研究，我找到了一种更好的处理ajax文件上传的方法。我使用的Jquery表单插件位于：

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

---

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

您可以通过挂接add事件来实现这一点。这样可以防止上传程序执行其默认行为。jquery文件上传文档解释了这一点，但有点难找到

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

以下内容以英文写成：

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

$（函数（）{
$（'#fileupload'）。fileupload({
数据类型：“json”，
添加：功能（e、数据）{
data.context=$（''）.text（'Upload'）
.appendTo（document.body）
。单击（函数（）{
data.context=$（'
'）.text（'Uploading…'）.replaceAll（$（this））；
data.submit（）；
});
},
完成：功能（e，数据）{
data.context.text（'Upload finished'）；
}
});
});

---

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

@martin-g看看这个问题：我找到了另一个更好的方法来处理ajax文件上传。我正在使用jquery表单插件。它的工作原理与常规表单一样，可以处理文件输入。

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