0

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

整体标题.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>

4

3 回答 3

0

尝试;

<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;" />
于 2013-11-05T22:47:47.620 回答
0

我将添加一些日志语句（请参阅 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>
于 2013-11-10T20:59:50.260 回答
0

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

像这样更改表单的 onclick 事件：

onclick="uploadFile(); return false;"

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

function completeHandler(event){
    _("status").innerHTML = event.target.responseText; _("progressBar").value = 0;
    _("my_form_id").submit();
}
于 2013-11-08T14:37:15.270 回答