让我们说一下这样的表单列表:
var forms = document.getElementsByClassName('uploadImage');
此列表中的每个项目如下所示:
<form method="post" action="/upload" enctype="multipart/form-data" id="f_x" class="uploadImage">
<input type="file" id="u_x">
<input type="submit" value="Submit" id="s_x">
</form>
x = [0,1,2,3,4,5]
如何遍历此列表并做两件事:
1-重命名文件名
2-提交用于上传文件的表格
我在网上搜索了许多资源,例如:https://www.telerik.com/forums/change-file's-name-when-it's-uploaded-via-html-form,它们都使用 jQuery ,我需要 javascript
更新:-
我想出了如何获取每种表格的输入值
forms[0].elements[0]
这将返回列表中第一个表单的第一个输入
forms[0].elements[0].value
会输出文件输入的值
答案 0 :(得分:2)
这是您链接到的代码,稍后我将对其进行分解。其中很多是香草javascript。
$(document).ready(function() {
initImageUpload();
function initImageUpload() {
$("#btn-submit").click(function(e) {
e.preventDefault();
var everlive = new Everlive({
appId: "",
scheme: "https"
});
// construct the form data and apply new file name
var file = $('#image-file').get(0).files[0];
var newFileName = file.filename + "new";
var formData = new FormData();
formData.append('file', file, newFileName);
$.ajax({
url: everlive.files.getUploadUrl(), // get the upload URL for the server
success: function(fileData) {
alert('Created file with Id: ' + fileData.Result[0].Id); // access the result of the file upload for the created file
alert('The created file Uri is available at URL: ' + fileData.Result[0].Uri);
},
error: function(e) {
alert('error ' + e.message);
},
// Form data
data: formData,
type: 'POST',
cache: false,
contentType: false,
processData: false
});
return false;
});
}
});
如前所述,它使用jQuery $.ajax()
使用新的FormData创建到服务器的AJAX POST,其中文件名已被修改。新的FormData代替HTML Form数据被发送到服务器。
因此,当单击按钮提交表单时,将阻止此事件。
var file = $('#image-file').get(0).files[0];
然后用于在jQuery中选择<input>
元素,然后从该元素中收集files
信息。
var file = document.getElementById("image-file").files[0];
这可以通过JavaScript完成。除了通过AJAX初始化和发送POST数据外,大部分脚本的其余部分将保持不变。
最好创建一个函数,将表单发送到该函数,然后它可以返回具有新名称的新表单数据。由于您不想提供MCVE,因此很难举一个例子,因为不清楚如何创建或收集新名称的数据。
function nameFile(inEl, newName){
var file = inEl.files[0];
var results = new FormData();
results.append('file', file, newName);
result results;
}
function sendFile(url, formData){
var request = new XMLHttpRequest();
request.open("POST", url);
request.send(formData);
}
sendFile("/upload", nameFile(document.getElementById("file-image"), "UserFile-" + new Date().now() + ".jpg"));
另一个问题是,如果您有多个表单和多个提交按钮,哪个按钮将触发所有项目上载?无论哪种方式,您都必须迭代每个表单(也许使用for()
循环),从每个表单中收集表单数据,更新名称并提交每个表单数据,最有可能通过AJAX进行。
希望这会有所帮助。