javascript 如何使用 Kendo Uploader 和使用 ajax 请求上传文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19421829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload a file with Kendo Uploader and using ajax request?
提问by Anelook
Problem: I would like to add an Upload control to the page, but the problem is, that I don't see how I can integrate it with all my other controls: I don't want to upload the file straight away, but only to allow user to select it and on button click upload all information at once by using javascript and ajax post request.
问题：我想向页面添加一个上传控件，但问题是，我不知道如何将它与所有其他控件集成：我不想立即上传文件，但只是允许用户选择它并在按钮上单击使用 javascript 和 ajax 发布请求一次上传所有信息。
A little bit more details: I have a webpage with a number of inputs and a button Save. When Save is clicked in javascript I review the inputs, put them into an object and send with ajax request to the server to be saved.
更多细节：我有一个包含多个输入和按钮保存的网页。当在 javascript 中单击 Save 时，我会查看输入，将它们放入一个对象中，然后将 ajax 请求发送到要保存的服务器。
Is it possible to do so? All examples I have found are based on Upload control having its own button "Upload" or behaving asynchronously. However, my scenario is different.
有可能这样做吗？我发现的所有示例都基于具有自己的“上传”按钮或异步行为的上传控件。但是，我的情况不同。
Will be grateful for any ideas.
将不胜感激任何想法。
回答by OnaBai
Kendo Upload supports both Sync and Async upload modes. Check this post.
剑道上传支持同步和异步上传模式。检查这个帖子。
So you can have an HTML form like this:
所以你可以有一个这样的 HTML 表单：
<form method="post" id="form" action="update.php">
<label for="control">Control: <input id="control" class="k-checkbox" type="checkbox"/></label>
<input name="photos" id="photos" type="file"/>
<input id="send" class="k-button" type="button" value="Save"/>
</form>
Where I define:
我在哪里定义：
- a checkbox that I'm going to validate for deciding to send or not the content of the form
- an file input field
- a button that when clicked will validate the form and then send it.
- 我将要验证的复选框，用于决定是否发送表单的内容
- 一个文件输入字段
- 一个按钮，单击时将验证表单然后发送它。
Now, the JavaScript for uploading files:
现在，用于上传文件的 JavaScript：
$("#photos").kendoUpload({
multiple: false
});
Since I'm not saying that it is asynchronousit is synchronousby default:
因为我不是说它asynchronous是synchronous默认的：
And the function for validating the form:
以及验证表单的函数：
$("#send").on("click", function (e) {
// Check that Checkbox is ticked
var ctl = $("#control").is(":checked");
if (ctl) {
// if so, send the form
$("#form").submit();
} else {
// otherwise show an alert
alert("Please check 'control' before sending");
}
});
回答by Anto Subash
i have came across the same problem long time ago and solved this by storing the uploaded file in the session until the user submits. since i had the restriction on file size and number of files it worked great for me. but the better way is to use the jquery.fileupload plugin. it has the support for Programmatic file upload.
我很久以前就遇到过同样的问题，并通过将上传的文件存储在会话中直到用户提交来解决这个问题。因为我对文件大小和文件数量有限制，所以对我来说效果很好。但更好的方法是使用 jquery.fileupload 插件。它支持程序化文件上传。
https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload
https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload
回答by Snd'
I solved upload files and data at the same time using Kendo UI:
我使用Kendo UI同时解决了上传文件和数据：
uploadForm.php
上传表单.php
<form method="POST" id="formLic" name="formLic" enctype="multipart/form-data">
<label for="lnumero">Número: </label>
<input type="text" id="lnumero" class="k-textbox"/>
<label for="larchivo">Archivo: </label>
<?php
$upload = new \Kendo\UI\Upload('larchivo');
$localization = new \Kendo\UI\UploadLocalization();
$localization->select('Examinar...');
$upload->showFileList(true)
->multiple(false)
->localization($localization)
->attr('name','larchivo[]');
echo $upload->render();
?>
</form>
<script>
$(document).ready(function() {
$("form#formLic").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "nuevo/uploadInsert.php",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
alert(result);
}
});
return false;
});
});
</script>
