jquery - jQuery 文件上传 - 同一页面上的多个表单
问题描述
我正在尝试将多个 jQuery File Upload 表单实现到一个页面,但文档不清楚。
我已经尝试过 StackOverflow 和 Google 的许多建议和技巧,但很多都是旧的(6 年以上)并且似乎与当前版本无关。以下是我浏览过的一些线程:
重复文档
没有回答,对于不同的版本,或者非常旧(或三者的组合)
同一页面上的两个 jQuery File Upload 小部件
jQuery File Upload - 同一页面上的多个文件上传小部件
同一页面上的多个 jQuery File Upload 小部件
文档在这里,似乎已经过时了
https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page
在main.js 中,它建议替换:
$('#fileupload').fileupload();
和:
$('.fileupload').each(function () {
$(this).fileupload({
dropZone: $(this)
});
});
并修改表格进行更改:
id="fileupload"
至:
class="fileupload"
但是,如果您查看当前的main.js文件,它建议替换的行不存在: https ://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js
这是我当前(无效)的代码:
形式:
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data">
主.js:
$('.fileupload').each(function () {
$(this).fileupload({
dropZone: $(this)
})
});
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: '/upload.cgi'
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
我已经替换了第 14、18 和 25 行的组合,并尝试了尽可能多的方法,但它要么不起作用,要么不起作用并产生错误,通常是TypeError: document.getElementById(.. .) 为 null或[object Object] not found。
我不是 Javascript 或 jQuery 方面的专家,这就是为什么我首先尝试使用这个插件的原因。有人可以解释一下main.js应该如何处理多种表单,因为文档已经过时(2012)或者我对它们的理解存在缺陷。谢谢你。
解决方案
您的 javascript 有点乱,我不完全确定您要完成什么;)但是,如果您一直在尝试为多个表单初始化 filesupload 插件,那么我想这就是您要寻找的:
$(".fileupload").each(function() {
$(this).fileupload({
dropZone: $(this)
});
});
.fileupload {
border: 5px dashed red;
display: inline-block;
width: 50px;
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
编辑:
我的困惑源于我需要在哪里应用此代码来启用多种表单。
如果可能的话,我建议在页面末尾包含您的 javascript,在 body 标记中。首先是依赖项(jquery、jquery-ui 和 fileupload),然后是您自己的脚本(在本例中为 main.js)。这是您的多格式文件上传应该实现的地方。我希望下面的示例可以帮助您了解这个想法:
page.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
$(".fileupload").each(function() {
$(this).fileupload({
dropZone: $(this)
});
});
推荐阅读
- android - FirebaseRecyclerAdapter 如何从数据库实时获取数据?什么是使用 addValueEventListener 或 addListenerForSingleValueEvent...?
- python - 在创建动态子类型时摆脱“if”语句
- extendscript - 使用 selectedLayers 属性过滤文本图层
- python - 从 python 中的“请求”模块写入文件时添加不必要的字符
- playframework - 无法使用 sbt Tests.setup 运行播放应用程序进行集成测试
- java - JSP web应用程序数据库连接无法加载
- javascript - 居中滚动到元素到通过#?(不修改 DOM / 使用 refs)
- node.js - 使用redis列表时nodejs上的偶尔错误
- mysql - 这个差旅管理操作的 SQL 查询是什么?
- python - 访问没有标签的 html 元素