1

我有一个看起来像这样的表格：

<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 ...
    });
});

然而，什么都没有通过。进一步的调查使我找到了序列化函数的 jquery 文档，其中指出：

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

如何传递文件选择元素？

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

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

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

4

2 回答 2

3

查看Valums File Uploader项目。它允许像您尝试做的那样通过 XHR 上传。您可以使用他的库或调整他的概念以适应您正在尝试做的事情。

于 2012-05-24T09:50:57.803 回答
0

解决这个问题的传统方法是让表单以隐藏的 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 项目，因为它看起来相当漂亮。

于 2012-05-24T10:21:43.997 回答