早上好,
我到处寻找我的问题的答案,但没有运气。我想使用 jquery,但尝试使用“常规”Javascript 却收效甚微。
目标
我想通过ajax(异步)将文件(只有一个)上传到将使用文件(txt)的php服务器。
问题
脚本不会调用php脚本,文件也不会上传。没有 javascript 错误,并且脚本运行得很好。在 chrome 中,process.php 没有出现在网络部分,所以我不确定它是来自脚本还是我的 php 中的错误。
一般信息
浏览器:Chrome 版本 26.0.1410.64 m
wamp server (php, mysql)
Bootstrap for layout
代码
索引:
<div class="span12" id="upload_form_div" style="display: block;">
<form id="upload_form" enctype="multipart/form-data" class="upload_form">
<fieldset>
<legend>
Please select a file to parse and merge with the database.
</legend>
<p>
<label for="files">File:</label>
<input type="file" class="text" id="files" name="file">
</p>
<p>
<input type="button" value="Start Parse">
</p>
</fieldset>
</form>
</div>
我包括 jquery.js、app.js(用于上传的脚本文件)和 bootstrap.min.js。只是认为没有必要显示完整的 html 标记。
脚本文件:
$(function(){
$("#progressbar").hide();
});
function showProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total) * 100;
$('#progressbar').progressbar("option", "value", percentComplete );
}
}
$(':button').click(function(){
var fileIn = $("#files")[0];
//Has any file been selected yet?
if (fileIn.files === undefined || fileIn.files.length == 0) {
alert("Please select a file");
return;
}
//We will upload only one file
var file = fileIn.files[0];
console.log(file);
//Show the progress bar
$("#progressbar").show();
$.ajax({
url: 'process.php', //server script to process data
type: 'POST',
data: file,
contentType: file.type,
processData: false,
success: function(){
$("#progressbar").hide();
},
error: function(){
$("#progressbar").hide();
alert("Failed");
//alert(xhr.responseText);
},
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
//myXhr.upload.addEventListener('progress',showProgress, false); // for handling the progress of the upload
//console.log($.ajaxSettings.xhr().upload);
console.log(myXhr.responseText);
} else {
console.log("Upload progress is not supported.");
}
return myXhr;
}
});
});
这是直接复制粘贴,所以我注释掉了一些故障排除行。
PHP
<?php
set_error_handler("E_ALL");
$upload_directory = "files/";
move_uploaded_file($_FILES['file']['tmp_name'], $upload_directory . $_FILES['file']['name']);
?>
php 文件会做更多的事情,但我现在只是想让文件上传。
如果有人需要更多信息,请告诉我,我会尽力提供信息。