启动文件上传的ajax的表单中没有提交整个表单 [英] initiating file upload within an ajax form WITHOUT submitting the entire form
问题描述
我有几个字段的形式。其中一个领域都需要文档（doc和.DOCX，.PDF）文件的上传。形式是一个AJAX的形式，设立这样每当用户离开（模糊）字段，字段的内容是通过向一些PHP在那里，它会被保存到MySQL数据库AJAXed。形式大部分作品（我是新来的AJAX和真的不擅长与JS的话），但我似乎无法得到文件上传部分工作，我怎么想。目前，我正在敲打周围的：
I have a form with several fields. One of these fields requires an upload of documentation (.doc, .docx, .pdf) files. The form is an AJAX form, set up so that whenever a user leaves (blur) a field, the field content is AJAXed through to some php where it'll get saved to a MySQL database. The form for the most part works (I'm new to AJAX and really not good with JS at all) but I cannot seem to get the file upload section to work how I would like. At the moment I am hammering around with this:
的（直接相关）HTML：
The (immediately relevant) html:
<td class="center" colspan="3">
<input type="file" name="myfile"> <input type="submit" value="Upload">
<div class="uploadProgress" style="border: 1px dotted green;">
<div class="bar"></div>
<div class="percent">0%</div>
<div id="status"></div>
</div>
<div id="fileList"></div>
</td>
这是在一个.js文件的JS：
The JS that is inside a .js file:
// AJAX file uploader
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('#uploadFile').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
})();
我使用jQuery和jquery.form.js
I am using jQuery and jquery.form.js
目前，我只是试图让这一部分的形式聊到PHP文件，但它似乎想HTML5验证标记为其他领域的需要，而不是仅仅忽略它们，并上传选择的文件。我如何得到它这样做？我不想整个表单提交，每次有人点击上传按钮，我只想要单个文件的照顾。
At the moment I am only trying to get this section of the form to talk to the php file, but it seems to want to html5 validate other fields marked as being "required" instead of just ignoring them and uploading the chosen file. How do I get it to do this? I don't want the entire form to be submitted each time someone clicks the upload button, I only want the single file taken care of.
在我能得到它的PHP文件，我可以处理它很轻松了，并希望解决如何从那里返回的输出结果列表。因此，只要得到它在那里开始的问题。
Once I can get it to the php file I can deal with it easily enough, and hopefully work out how to return an output for the resulting list from there. So just getting it there to begin with is the problem.
链接到网页，我试图让文件上传功能工作的小提琴。这说明什么是present开始。 http://jsfiddle.net/k3dj214k/2/
Link to a fiddle of the page I'm trying to get the file upload function to work in. This shows what is present to begin with. http://jsfiddle.net/k3dj214k/2/
在此先感谢
推荐答案
当作ajaxForm prepares一个表单提交，这意味着你不能只提交一个元素在这种方式的形式。
ajaxForm prepares a form to be submitted which means that you cannot submit only a single element of the form in this way.
在另一方面，你不能执行当作ajaxForm 的方式，它绕过了其他元素的HTML5验证的情况下，文件上传的。
On the other hand, you cannot implement ajaxForm in a way that it bypasses the html5 validation of the other elements in case of file upload.
所以：
- 您可以使用不同的库这将允许只上传从HTML文件输入一个文件，如 jQuery的文件上传。 下面是一个例如中如何实现只有一个文件上传无需一种形式。
- 您可以从表单中删除文件上传元素，并把它变成另一种不同的形式，从而将文件上传表单不与其他形式的干扰。
- You could use different libraries which would allow to only upload a file from an html file input such as jQuery File Upload. Here is an example of how you can implement only a file upload without having a form.
- You could remove the file upload element from the form and put it into another separate form so the file upload form doesn't interfere with the other form.
这篇关于启动文件上传的ajax的表单中没有提交整个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
