使用 jquery post 上传 PHP 文件
Posted
技术标签:
【中文标题】使用 jquery post 上传 PHP 文件【英文标题】：PHP file-upload using jquery post 【发布时间】：2012-06-18 06:54:56 【问题描述】：如果有人知道这段代码有什么问题，请告诉我。
基本上我想使用 jQuery 上传文件
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(event)
$('#form1').submit(function(event)
event.preventDefault();
$.post('post.php',function(data)
$('#result').html(data);
);
);
);
</script>
</head>
<body>
<form id="form1">
<h3>Please input the XML:</h3>
<input id="file" type="file" name="file" /><br/>
<input id="submit" type="submit" value="Upload File"/>
</form>
<div id="result">call back result will appear here</div>
</body>
</html>
还有我的 php 'post.php'
<?php
echo $file['tmp_name'];
?>
上传的文件名没有返回。问题是我无法访问上传的文件。
提前致谢！ 湿婆
【问题讨论】：
【参考方案1】：不不不，您应该使用 jQuery 表单插件来异步上传文件。您不能使用 jQuery $.post 方法上传文件。该文件将使用隐藏的 iframe 上传
另一种方法是通过 FileAPI/BlobApi 使用 HTML5 上传
【讨论】：
谢谢伙计！现在，我将只使用普通的 html 表单提交而不是 jquery post。这样，它对我有用！【参考方案2】：基本上我想使用 jQuery 上传文件
您不能使用 AJAX 上传文件。您可以使用使用隐藏 iframe 的 jquery.form 插件：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(event)
$('#form1').ajaxForm(function(data)
$('#result').html(data);
);
);
</script>
</head>
<body>
<form id="form1" action="post.php" method="post" enctype="multipart/form-data">
<h3>Please input the XML:</h3>
<input id="file" type="file" name="file" /><br/>
<input id="submit" type="submit" value="Upload File"/>
</form>
<div id="result">call back result will appear here</div>
</body>
</html>
还要注意表单上的enctype="multipart/form-data"。
另一种可能性是使用HTML5 File API，假设客户端浏览器支持它，您可以实现它。
【讨论】：
你的意思是不能使用 AJAX 上传文件还是不能使用 jQuery 的 post() 方法上传文件？【参考方案3】：尝试使用 iframe 上传，因为您无法使用 $.post 方法发送文件。
【讨论】：
【参考方案4】：你也可以试试 jquery uploadify - http://www.uploadify.com/
【讨论】：
当浏览器有 API 时，为什么还要使用外部库？ 因为我们很久以前就在谈论上传文件，我会说一个世纪或更长时间的新技术开发。当我提出没有 html5 或者它刚刚开始并且除了纯 html 之外的任何东西都需要 Flash 时（大多数情况下）。 Uploadify 在那个时候是相当不错的库，除其他功能外，它还提供进度条、多个文件上传、拖放，如果我没记错的话，它是基于 jquery 的。【参考方案5】：用 jQuery $.post 无法上传文件，尽管如此，使用文件 API 和 XMLHttpRequest，完全可以用 AJAX 上传文件，你甚至可以知道已经上传了多少数据......
$('input').change(function()
var fileInput = document.querySelector('#file');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/');
xhr.upload.onprogress = function(e)
/*
* values that indicate the progression
* e.loaded
* e.total
*/
;
xhr.onload = function()
alert('upload complete');
;
// upload success
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
// if your server sends a message on upload sucess,
// get it with xhr.responseText
alert(xhr.responseText);
var form = new FormData();
form.append('title', this.files[0].name);
form.append('pict', fileInput.files[0]);
xhr.send(form);
【讨论】：
遗憾的是，对 XHR2 的支持还不够好。但是感谢您对此的投入，我已经设法通过使用该方法对 Zepto 和一些模拟数据进行了完全有效的测试。 当前所有主流浏览器版本都支持它（甚至 IE 10+）。 caniuse.com/xhr2【参考方案6】：你的upload.php有一些错误。
你应该改变你的这部分。
echo $file['tmp_name'];
到：-
echo $_FILES['file']['tmp_name'];
【讨论】：
以上是关于使用 jquery post 上传 PHP 文件的主要内容，如果未能解决你的问题，请参考以下文章
使用 Javascript FormData()、AJAX $.post 和 PHP 的简单文件上传
使用javascript将视频上传到facebook，无需php