0
我正在使用以下代碼將文件從電話上傳到Web服務器。如果我刪除ajax調用,並使用表單只上傳工作。如果我使用ajax,我使用PHP或CGI scipt來處理上傳失敗。 CGI給我一個格式錯誤的帖子標題錯誤。XMLHttpRequest()格式錯誤的郵件標題HTML5上傳
<script type="text/javascript">
function uploadFile() {
var fd = new FormData();
var count = document.getElementById('fileUpload').files.length;
for (var index = 0; index < count; index ++)
{
var file = document.getElementById('fileUpload').files[index];
alert(file.name);
}
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", "upload.pl");
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) {
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>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.pl">
<div>
<label for="fileUpload">Take or Select Images</label><br />
<input type="file" name="fileUpload" id="fileUpload" accept="image/*" capture="camera" /><br />
<input type="text" name="email" value="" />
</div>
<div id="details"></div>
<div>
<input type="button" onclick="uploadFile();" value="Upload" />
</div>
<div id="progress"></div>
</form>
標準的AJAX不能做文件上傳。通常的解決方法是將表單字段關閉到隱藏的iframe中並在那裏執行約定表單提交。 –
除非我錯過了什麼,你實際上並沒有發送任何東西! – jcaron