使用 AJAX 提交包含文件输入的 HTML 表单答案

【问题标题】：Submitting a HTML form with AJAX that includes a file input使用 AJAX 提交包含文件输入的 HTML 表单
【发布时间】：2011-08-01 21:38:35
【问题描述】：

您可以通过 AJAX 提交具有文件类型输入的表单吗？我正在尝试使用 jquery 来执行此操作，但它似乎无法序列化正在提交的文件。这是因为安全问题而被浏览器阻止的东西吗？有办法解决吗？

【问题讨论】：

能贴出你正在使用的html/js吗？

标签： jquery html ajax forms browser

【解决方案1】：

看看AJAX Upload plugin。

【讨论】：

这个插件不是只上传文件吗？它会提交表单中的其他信息吗？我认为这个插件是发布文件，但没有其他数据，我认为被问者打算发送其他信息。

【解决方案2】：

技术上的答案是否定的，但是有一些“技巧”可以将您的表单发布到隐藏的 iFrame 以使其看起来像是 Ajax。谷歌搜索应该会产生很多例子。

【讨论】：

【解决方案3】：

您可以使用 HTML5 的一部分 File API 来执行此操作：

http://www.html5rocks.com/tutorials/file/dndfiles/

关于用它发帖的讨论，您可以从

开始

http://groups.google.com/group/play-framework/browse_thread/thread/6223a9b25b87a839/6c74eda4f7b33010

基本上，使用File API，如果浏览器支持，javascript 可以从本地系统读取文件，然后您可以通过 ajax 调用发布该文件，以及您需要提交的任何其他内容。

如果您需要提交多个文件，这可能是一个很好的起点：

http://robertnyman.com/2010/04/22/using-the-file-api-for-reading-file-information-multiple-file-uploads-another-sister-specification-to-html5/

如果你一定要用jQuery，那么你可以试试这个插件，虽然我没用过：

http://plugins.jquery.com/blueimp-file-upload-jquery-ui/

【讨论】：

最后一个链接坏了

【解决方案4】：

我对 Scott Harwell 投了反对票，但没有正确解释我为什么投反对票。我投了反对票，因为这可以做到，而且我始终如一地做到这一点。我的代码如下：

html标签：

 <form id="inputForm1" method="POST" enctype="multipart/form-data" ACTION="">
    <div id="file-attachment">
        <div style="float:left;">file:</div>
        <div id="file-sub" style="float:left;">
            <input type="file" id="WebAccessFile" name="WebAccessFile" size="45" value="">
        </div>
    </div>
 </form>

关键是enctype="multipart/form-data"

我的jQuery ajax 语句如下：

$.ajaxFileUpload({url:'/LonApps/FoxWeb.exe/EWI/ewiprocedures?Proc=addrelease',
    secureuri: false,
    fileElementId:'WebAccessFile',
    dataType: 'text'
});

我使用 Visual FoxPro 作为此功能的编码语言，因此我将发布我的 VFP 代码，但您可以将此代码调整为您使用的任何编码语言：

 loAttachment = Request.FormFieldObject("WebAccessFile")
 lcReleaseMessage = loAttachment.FileName
 lcSaveFile = ""
 IF loAttachment.ContentLength > 0
    lcFileName = loAttachment.FileName
    lcFileContent = loAttachment.Value()
    lcSaveFile = "D:\Website\Publish\Depts\EWI\docs\" + lcFileName
    SET SAFETY OFF 
    STRTOFILE(lcFileContent, lcSaveFile)
    SET SAFETY ON 
    lcHTTPSaveFile = "/Publish/Depts/EWI/docs/" + lcFileName
 ENDIF

这是接收输入值作为 loAttachment（lo 代表本地对象）。然后，除其他外，它会查找附件内容长度是否大于 0，如果是，则将附件保存到本地 Web 目录以供以后访问。

【讨论】：