通过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屋！