Question

我在phpbb中尝试此代码，但出于某种原因，在第一次单击时它会触发错误eventlistener，但是当我再次单击提交文件时，它开始显示上传进度。为什么呢？

overall_header.html：

<script>
/* Script written by Adam Khoury @ DevelopPHP.com */ /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */ 
function _(el){
    return document.getElementById(el);
}

function uploadFile(){
    var file = _("file1").files[0];
    var formdata = new FormData();
    //alert(file.name+" | "+file.size+" | "+file.type);
    formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.addEventListener("loadstart", loadStart, false);  
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "root/file_upload_parser.php"); ajax.send(formdata);
//alert(ajax);
}

function loadStart(event){
_("status").innerHTML = event.target.responseText; _("progressBar").value = "fuck";
}


function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event){
_("status").innerHTML = event.target.responseText; _("progressBar").value = 0;
}

function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</script>

posting_attach_body.html

    <div class="inner"><span class="corners-top"><span></span></span>

<p>{L_ADD_ATTACHMENT_EXPLAIN}</p>

<fieldset class="fields2">
<dl>
    <dt><label for="fileupload">{L_FILENAME}:</label></dt>
    <dd>
        <input type="file" name="file1" id="file1" maxlength="{FILESIZE}" value="" class="inputbox autowidth" /> 
        <input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="uploadFile()" />
    </dd>
</dl>
<dl>
<dt><label for="urlupload">{L_URLUPLOAD}</label></dt>
<dd>
    <input type="url" name="urlupload" id="urlupload" maxlength="{FILESIZE}" value="" class="inputbox autowidth" /> 
    <input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="upload = true;" />
</dd>

Answer 1

尝试;

<input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="uploadFile()" />

而不是;

<input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="upload = true;" />

Answer 2

你的问题是，在ajax调用之后提交表单，停止ajax请求并触发错误事件。

更改表单的onclick事件：

onclick="uploadFile(); return false;"

因此，您的表单不会直接提交。然后，在ajax请求结束时提交表单（完成事件）：

function completeHandler(event){
    _("status").innerHTML = event.target.responseText; _("progressBar").value = 0;
    _("my_form_id").submit();
}

Answer 3

我会添加一些日志语句（请参阅JavaScript控制台），如下所示，以查看脚本中的实际情况。您说上传工作正常，并且HTML未按预期更新。

我怀疑event.target.responseText是错误的。 responseText是XMLHttpRequest的财产。

<script>
/* Script written by Adam Khoury @ DevelopPHP.com */ /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */ 
function _(el){
    return document.getElementById(el);
}

function traceMsg(msg) {
    // Comment the function to disable logging; 
    // This works in Google Chrome and Firefox.        
    console.log(msg);
}

function uploadFile(){
    traceMsg("uploadFile(): Start");
    var file = _("file1").files[0];
    var formdata = new FormData();
    traceMsg("uploadFile(): " + file.name+" | "+file.size+" | "+file.type);
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.addEventListener("loadstart", loadStart, false);  
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", (event) {
         traceMsg("completeHandler(event): Start");
         traceMsg("completeHandler(event): Response text:"); 
         // I SUSPECT THAT THIS LINE IS NOT ALL RIGHT.
         traceMsg(event.target.responseText);  
         // IS THIS CORRECT?
         traceMsg(ajax.responseText); 

         _("status").innerHTML = event.target.responseText; 
         _("progressBar").value = 0;
         traceMsg("completeHandler(event): End");
    }, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "root/file_upload_parser.php"); ajax.send(formdata);
   //alert(ajax);
    traceMsg("uploadFile(): End");
}

function loadStart(event){
    traceMsg("loadStart(event): Start");
    _("status").innerHTML = event.target.responseText; _("progressBar").value = "f*ck";
    traceMsg("loadStart(event): End");
}


function progressHandler(event) {
    traceMsg("progressHandler(event): Start");
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
    traceMsg("progressHandler(event): End");
}   

function errorHandler(event){
    traceMsg("errorHandler(event): Start");
    _("status").innerHTML = "Upload Failed";
    traceMsg("errorHandler(event): End");
}

function abortHandler(event){
    traceMsg("abortHandler(event): Start");
    _("status").innerHTML = "Upload Aborted";
    traceMsg("abortHandler(event): End");
}
</script>

Javascript上传eventlistener需要两次点击才能触发

3 个答案: