用AJAX提交HTML表单文件。

I have a form and a div. I want the user to select an text file and hit submit and that will populate the div with the content of the file. I would like to do that without having to refresh the page.

我有一个表单和一个div。我希望用户选择一个文本文件并点击submit，它将用文件的内容填充div。我不需要刷新页面就可以这样做。

<form action="action.php" method="post" enctype="multipart/form-data">
Click the "Choose File" button and browse for the file to import.<br /><br />
<input type="file" name="filelocation" value="Browse" /><br />
<input type="submit" name="submitform" value="Submit" />
</form>

<div id="filecontent">

</div>

2 个解决方案

#1

Theres is no easy way to do that, but u can use an Iframe with an ajax call to get your file to the server and work with it the normal ajax way

要做到这一点并不容易，但是您可以使用带有ajax调用的Iframe将文件发送到服务器，并使用普通的ajax方式进行处理

<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
File: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>

look at target="yourhiddeniframe"

看看目标= " yourhiddeniframe "

here is a complete howto: http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

这里有一个完整的方法:http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

greetings

问候

#2

There is no easy way to submit/upload the files via ajax. However, you can go for the jQuery Uploadify plugin to the trick for you.

通过ajax提交/上传文件是不容易的。但是，您可以使用jQuery Uploadify插件来解决这个问题。

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Uploadify是一个jQuery插件，它集成了一个完全可定制的多文件上传工具。它使用Javascript、ActionScript和任何服务器端语言的混合，在页面上的任何DOM元素上动态创建实例。

#1