通过jQuery上传文件,提供FormData对象并且没有文件名,GET请求 [英] Uploading files via jQuery, object FormData is provided and no file name, GET request
问题描述
我正在使用jQuery脚本将文件上传到新页面。它以某种方式起作用,但问题在于它将表单数据作为对象FormData
发送。
以下是代码:
$('#submit' ).click(function(){
var formData = new FormData($(this).form);
$ .ajax({$ b $ url:'/ test / file_capture',
// Ajax事件
beforeSend:function(e){
alert('您确定要上传文档');
},
success:function( e){
alert('上传完成');
},
错误:函数(e){
alert('error'+ e.message);
},
//表单数据
data:formData,
//用于告诉jQuery不处理数据或担心内容类型的选项
cache:false,
contentType:false,
processData:false
});
return false;
});
HTML部分如下:
< form enctype =multipart / form-data>
< input type =fileid =imagename =imageaccept =Image / */>
< input type =submitid =submitname =value =Upload/>
< / form>
但生成的链接为:
http:// localhost:4965 / test / file_capture?[object%20FormData]& _ = 1386501633340
没有图像名称或其他附件到它。我错过了什么?即使没有错误,系统也会提出请求,并显示上传完成警报。
- 不是完整的表格
var fileInput = $('#image');
var file = fileInput.files [0];
var formData = new FormData();
formData.append('file',file);
编辑
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>< / script>
< form enctype =multipart / form-data>
< input type =fileid =imagename =imageaccept =Image / */>
< input type =submitid =submitname =value =Upload/>
< / form>
< script>
$('#submit')。click(function(event){
event.preventDefault()
var file = $('#image')。get(0).files [ 0];
var formData = new FormData();
formData.append('file',file);
$ .ajax({$ b $ url:'/ test / file_capture ',
// Ajax事件
beforeSend:function(e){
alert('您确定要上传文档');
},
成功:函数(e){
alert('上传完成');
},
错误:函数(e){
alert('error'+ e.message) ;
},
//表单数据
data:formData,
类型:'POST',
//选项告诉jQuery不要处理数据或担心
cache:false,
contentType:false,
processData:false
});
return false;
});
< / script>
I am using a jQuery script to upload files to a new page. It somehow works too, but the issue is that it sends the form data as object FormData
.
Here is the code:
$('#submit').click(function () {
var formData = new FormData($(this).form);
$.ajax({
url: '/test/file_capture',
//Ajax events
beforeSend: function (e) {
alert('Are you sure you want to upload document.');
},
success: function (e) {
alert('Upload completed');
},
error: function (e) {
alert('error ' + e.message);
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
return false;
});
The HTML part is as:
<form enctype="multipart/form-data">
<input type="file" id="image" name="image" accept="Image/*" />
<input type="submit" id="submit" name="" value="Upload" />
</form>
But the link that is generated is as:
http://localhost:4965/test/file_capture?[object%20FormData]&_=1386501633340
Which has no image name or any other thing attached to it. What am I missing? Even though there is no error and the request is made and the Upload complete alert is shown.
you should only submit the file - not the complete form
var fileInput = $('#image');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
EDIT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form enctype="multipart/form-data">
<input type="file" id="image" name="image" accept="Image/*" />
<input type="submit" id="submit" name="" value="Upload" />
</form>
<script>
$('#submit').click(function (event) {
event.preventDefault()
var file = $('#image').get(0).files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/test/file_capture',
//Ajax events
beforeSend: function (e) {
alert('Are you sure you want to upload document.');
},
success: function (e) {
alert('Upload completed');
},
error: function (e) {
alert('error ' + e.message);
},
// Form data
data: formData,
type: 'POST',
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
return false;
});
</script>
这篇关于通过jQuery上传文件,提供FormData对象并且没有文件名,GET请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!