为什么firebug控制台中的POST没有显示任何内容,并且在下面的jQuery代码中没有上传文件
Why the POST in firebug console is showing nothing and file is not getting uploaded in the following jQuery code?
我有一些Javascript代码。我包含了jQuery文件jQuery-2.1.1.min.js,并将整个Javascript代码转换为jQuery代码,但当我执行此代码时,我无法POST该文件。因此,我无法使用PHP将文件上传到服务器。在firebug控制台中,我总是一片空白。有人能帮我纠正这个问题吗?
原始Javascript代码:
<!DOCTYPE html>
<html>
<head>
<title>Take or select photo(s) and upload</title>
<script type="text/javascript">
function fileSelected() {
var count = document.getElementById('fileToUpload').files.length;
document.getElementById('details').innerHTML = "";
for (var index = 0; index < count; index ++) {
var file = document.getElementById('fileToUpload').files[index];
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('details').innerHTML += 'Name: ' + file.name + '<br>Size: ' + fileSize + '<br>Type: ' + file.type;
document.getElementById('details').innerHTML += '<p>';
}
}
function uploadFile() {
var fd = new FormData();
var count = document.getElementById('fileToUpload').files.length;
for (var index = 0; index < count; index ++) {
var file = document.getElementById('fileToUpload').files[index];
fd.append('myFile', file);
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "savetofile.php");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progress').innerHTML = percentComplete.toString() + '%';
} else {
document.getElementById('progress').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div>
<label for="fileToUpload">Take or select photo(s)</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*" capture="camera" />
</div>
<div id="details"></div>
<div>
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progress"></div>
</form>
</body>
</html>
将上面的代码转换为jQuery代码,如下所示,但在POST中为空:
<!DOCTYPE html>
<html>
<head>
<title>Take or select photo(s) and upload</title>
<script type="text/javascript" charset="utf-8" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function fileSelected() {
var count = $('#fileToUpload').get(0).files.length;//$('#fileToUpload').size() may also work
$('#details').html("");
for (var index = 0; index < count; index ++) {
var file = $('#fileToUpload').get(0).files[index];//.get(0) gives you the js DOM object
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
$('#details').append('Name: ' + file.name + '<br>Size: ' + fileSize + '<br>Type: ' + file.type);
$('#details').append('<p>');
}
}
function uploadFile() {
var fd = new FormData();
var count = $('#fileToUpload').get(0).files.length;
for (var index = 0; index < count; index ++) {
var file = $('#fileToUpload').get(0).files[index];
fd.append('myFile', file);
}
$.ajax({url:"savetofile.php", type:'POST', success:uploadComplete, error:uploadFailed});
// abort is included in error, the second parameter passed to the error method would be statusText with value of abort in case of abort!
}
function uploadComplete(data) {
/* This event is raised when the server send back a response */
alert(data);
}
function uploadFailed(jqXHR, textStatus) {
if(statusText==="abort") {
alert("The upload has been canceled by the user or the browser dropped the connection.")
} else {
alert("There was an error attempting to upload the file.");
}
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div>
<label for="fileToUpload">Take or select photo(s)</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*" capture="camera" />
</div>
<div id="details"></div>
<div>
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progress"></div>
</form>
</body>
</html>
提前谢谢。
如果你愿意,我也可以给你PHP文件的代码。
你没有传递任何数据,这就是你正在做的
$.ajax({
url : "savetofile.php",
type : 'POST',
success : uploadComplete,
error : uploadFailed
});
即,不发送任何东西,您必须实际添加数据
$.ajax({
url : "savetofile.php",
type : 'POST',
data : fd,
success : uploadComplete,
error : uploadFailed
cache : false,
contentType : false,
processData : false
});
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Image赢得't隐藏在滚动jQuery上
- 我可以在Javascript/jQuery中使用一个变量作为键吗
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 应用程序在呈现Jquery Mobile之前显示无样式的Html
- 如何在扩展jQuery方法时传递参数
- 如何在使用jQuery.html()时防止javascript执行
- 在Javascript(jquery)中,有没有一种方法可以检测页面锚点何时更改
- onclick在使用jquery附加时不触发提交输入
- 如何在没有jquery的情况下使用Papa Parse
- 如何在使用jQuery应用display:none后正确显示元素
- 计时器在使用 jQuery 一分钟后没有触发,或者每 1 分钟后给出一些其他解决方案来触发功能
- 如何让li项目在这个jQuery列表中滑动和/或淡出视图
- 如何在没有jQuery的情况下模拟按名称命名的事件或解除单个事件的绑定
- 在悬停Jquery/cs3时通过翻转动画更改文本
- 为什么form.submit()在使用jQuery时有效,而在使用普通JS时无效
- 如何使Javascript函数“;定义的“;在使用jQuery时
- 在使用jquery插入之前删除元素
- 在使用jQuery第二次单击元素类后开始操作
- 为什么在Jquery中单击图像时图像显示在下面