我们都知道单独使用jquery无法进行文件上传。但是可以使用jquery和隐藏的IFrame来解决这个问题。
我找到了四种使用这种方法的解决方案,但看不出我如何实现它们。
This solution found here on Stackoverflow,是这样做的一种方式。但我不确定这是不是最好的方式。 (未经测试)
Using jQuery Form plugin是另一种选择。我试过跟this example,但没有帮助。该解决方案将我的uploader.php加载到新页面中,但无法获取文件信息。我无法使用IFrame看到它。
Ajax File Upload是另一个解决方案 - 这个是装箱动态IFrame。看一下示例代码,我无法确定如何实现它。
最后一个解决方案是来自Webtoolkit的AJAX file upload。在这里,我无法弄清楚应该在哪里声明它应该为文件处理加载什么PHP文件。
是否有人使用其中一种方法有一个工作示例? 我在另一个解决方案中使用了Uploadify - 但我现在不想使用flash。
答案 0 :(得分:2)
对于#3这基本上就在他们的网站上。
我是.Net的家伙,所以我无法真正帮助你接收文件所需的.php处理程序,但我希望你发现它很有用。
<html>
<head>
<link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
//YOUR URL TO RECEIVE THE FILE
url: 'http://localhost/testing/postfile.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(data.error);
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Ajax File Upload</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>
</tr>
<tr>
<td>Please select a file and click Upload button</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>