Question

我的表单看起来像这样：

<form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" id="uploadFile" name="uploadFile" /><br />
    <input type="submit" id="process" name="process" value="Process File" />
</form>

我想允许用户上传文件，然后进行处理。当用户点击“进程”时，我想使用jquery帖子调用此页面（此表单显示在cfwindow中，我不想离开cfwindow），进行一些处理并输出消息。这是我通常使用的代码：

$('#process').click(function(){
    $.post('<cfoutput>#cgi.script_name#</cfoutput>', $('#uploadForm').serialize(), function(data){
        ... some processing ...
    });
});

然而，没有任何东西被传递。进一步的调查使我得到了serialize函数的jquery文档，其中指出：

来自文件选择元素的数据未被序列化。

如何传递文件选择元素？

（如果这有所不同 - 当我发布到页面时，我正在使用此代码来读取在文件选择元素中上传的文件：

<cfspreadsheet action="read" src="#form.uploadFile#" sheet="1" query="spreadsheetData" headerRow="1" excludeHeaderRow="true">

最初我只是使用常规表单帖子，它工作得很好。我想切换到ajax，以便我可以保持cfwindow打开而不是重新加载。）

Answer 1

查看Valums File Uploader项目。它允许像你想要的那样通过XHR上传。你可以使用他的图书馆或使他的概念适应你想要做的事情。

Answer 2

传统的方法是让表单定位一个隐藏的iFrame：

<!-- fileupload.cfm -->
<script>function functionToHandleUploadComplete(){ // Do things here }</script>
<form action="getfile.cfm" method="post" target="myHiddeniFrame" />
  <input type="file" name="myFile" />
  <!-- your fields -->  
</form>

<iframe id="myHiddeniFrame" style="somthing to hide the frame" />

<!-- getFile.cfm loaded in an iFrame within fileUpload.cfm-->
<cffile action="upload" formField="myFile" ..... />
<cfoutput>
  <script>
    window.parent.functionToHandleUploadComplete();
  </script>
</cfoutput>

我们在产品中使用这种方法，它工作正常。提供您发送到的页面位于同一个域中，您可以将其推出javascript告诉包含页面上传已完成。

我首先看一下File Uploader项目，因为它看起来很漂亮。

如何为文件上传表单执行jquery帖子？

2 个答案: