我怎样才能做文件上传使用隐藏iframe + jQuery的？ [英] How can I do File Upload using hidden iframe + jquery?
问题描述
我们都知道使用jquery单独进行文件上传是不可能的。但是可以使用jQuery和隐藏的IFrame来解决这个问题。
我已经找到了四种使用这种方法的解决方案，但没有看到我可以如何实现它们。
-
这个解决方案在这里找到了Stackoverflow ，是这样做的一种方法。但我不确定这是否是最好的方法。 （未测试）
-
使用jQuery表单插件是另一种选择。我试着按照这个例子
一个>，但它没有帮助。该解决方案加载我的uploader.php在一个新的页面，它无法获得文件信息。我无法看到它使用IFrame。 -
Ajax File Upload 是另一种解决方案 - 这是一个动态的IFrame。看看这个示例代码，我无法弄清楚如何实现这个功能。
最后一个解决方案是 AJAX文件上传。在这里，我无法弄清楚我应该在哪里声明应该为文件处理加载的PHP文件。
有没有人有一个使用这些方法之一的工作示例？
我已经在另一个解决方案中使用了Uploadify - 但我不想现在使用Flash。
对于＃3这基本上就是他们的网站。
我是一个.Net小伙子，所以我不能真正帮你处理你需要接收文件的.php处理程序，但是我希望你能找到这很有用。
< html>
< head>
< link href =http://www.phpletter.com/css/general.css =stylesheettype =text / cssmedia =screen>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.4.2.min.js>< / script>
< script type =text / javascriptsrc =http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js>< / script>
< script type =text / javascript>
函数ajaxFileUpload（）
{
$ .ajaxFileUpload
（
{
//您的URL接收文件
url：'http ：//blocalhost/testing/postfile.php'，
secureuri：false，
fileElementId：'fileToUpload'，
dataType：'json'，
success：function（data，状态）
{
if（typeof（data.error）！='undefined'）
{
if（data.error！=''）
{
alert（data.error）;
} else
{
alert（data.msg）;
}
}
}，
错误：函数（数据，状态，e）
{
alert（data。错误）;
alert（e）;
}
}
）
return false;
}
< / script>
< / head>
< body>信信息范范范范中程范范内范例范范范辛
< table cellpadding =0cellspacing =0class =tableForm>
< thead>
< tr>
> Ajax文件上传< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>< input id =fileToUploadtype =filesize =45name =fileToUploadclass =input>< / td>
< / tr>
< tr>
< td>请选取一个档案，然后按一下[上载]按钮< / td>
< / tr>
< / tbody>
< tfoot>
< tr>
< td>< button class =buttonid =buttonUploadonclick =return ajaxFileUpload（）;>上传< /按钮>< / td>
< / tr>
< / tfoot>
< / table>
< / form>
< / body>
< / html>
We all know it's not possible to do file upload using jquery alone. But it is possible to do a work around using jquery and hidden IFrame.
I have found four solutions using this method, but don't see how I can implenent them.
This solution found here on Stackoverflow, is one way of doing it. But I'm not sure if it's the best way. (not tested)
Using jQuery Form plugin is another option. I tried following this example, but it did not help. The solution loads my uploader.php in a new page and it's not able to get file info. I can't see it using IFrame.
Ajax File Upload is another solution - this one is crating a dynamic IFrame. Looking at the example code, I can't fiure out how to implement this.
The last solution is AJAX file upload from Webtoolkit. Here I can't figure out where I should declare what PHP file it should load for file handling.
Does anyone have a working example using one of these methods?
I have used Uploadify in a another solution - but I don't want to use flash now.
For #3 This is basically right off their website.
I'm a .Net guy, so I can't really help you on the .php handler you'll need to receive the file, but I hope you find this useful.
<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>
这篇关于我怎样才能做文件上传使用隐藏iframe + jQuery的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
