0

私はphpbbでこのコードを試していますが、何らかの理由で最初のクリックでエラーeventlistenerが発生しますが、もう一度ファイルを送信をクリックすると、アップロードの進行状況が表示され始めます。なんで？

全体的な_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>

4

3 に答える 3

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 に答える
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 に答える