Страница загружает файл дважды?

Question

Я пытаюсь включить индикатор выполнения загрузки на свою страницу.

мне удалось получить индикатор рабочего с помощью этого метода:

http://www.developphp.com/view.php?tid=1351.

Когда пользователь нажимает кнопку «Загрузить файл», индикатор выполнения выполняет бизнес и показывает, сколько загружено и когда оно будет завершено.

Однако, когда пользователь отправляет форму, файл, кажется, снова загружается (хром показывает информацию о загрузке файла в левом нижнем углу экрана).

Как я могу избежать этого? Кроме того, как я могу получить его, поэтому у меня нет кнопки для загрузки файла?

Все, что я хочу, это кнопка отправки, индикатор выполнения показывает прогресс, а затем переходит на другую страницу после завершения загрузки (через какой-то php, который делает то, что ему нужно делать с информацией POST)?

Мой соответствующий код ниже ...

<form method="post" action="../../assets/php/actiontest.php" name='mainForm' enctype="multipart/form-data" OnSubmit="return CheckForm()"> 
    <input type="text" name="Customer" placeholder="Customer" required/><br/> 
    <input type="file" name="file1" id="file1"><br/> 
    <input type="button" value="Upload File" onclick="uploadFile()" /> 
    <progress id="progressBar" value="0" max="100" style="width:100%;"></progress> 
    <input type="submit" id="submit" />  
</form> 

<script type="text/javascript"> 
function _(el){ 
    return document.getElementById(el); 
} 

function uploadFile(){ 
    var file = _("file1").files[0]; 
    var formdata = new FormData(); 
    formdata.append("file1", file); 
    var ajax = new XMLHttpRequest(); 
    ajax.upload.addEventListener("progress", progressHandler, false); 
    ajax.addEventListener("load", completeHandler, false); 
    //ajax.open("POST", "file_upload_parser.php"); 
    ajax.open("POST", "../../assets/php/actiontest.php"); 
    ajax.send(formdata); 
} 

function progressHandler(event){ 
    var percent = (event.loaded/event.total) * 100; 
    _("progressBar").value = Math.round(percent); 
} 

function completeHandler(event){ 
    _("progressBar").value = 0; 
} 
</script> 

Answer 1

Хорошо, вот как я обернулся вокруг проблемы. Я удалил кнопку отправки формы и передал все значения формы в FormData, все данные POST затем были отправлены на мой PHP-скрипт, а скрипт php обработал преобразование в PDF.

Таким образом, индикатор выполнения показывает ход всей формы, загружаемой после нажатия кнопки загрузки файла, а не только фотографии.

<script type="text/javascript"> 
function _(el){ 
    return document.getElementById(el); 
} 
function uploadFile(){ 
    var form = _("form1"); 
    var file = _("file1").files[0]; 
    var formdata = new FormData(form); 
    formdata.append("file1", file); 
    var ajax = new XMLHttpRequest(); 
    ajax.upload.addEventListener("progress", progressHandler, false); 
    ajax.addEventListener("load", completeHandler, false); 
    //ajax.open("POST", "file_upload_parser.php"); 
    ajax.open("POST", "../../assets/php/actiontest.php", true); 
    ajax.send(formdata); 
} 
function progressHandler(event){ 
    var percent = (event.loaded/event.total) * 100; 
    _("progressBar").value = Math.round(percent); 
} 
function completeHandler(event){ 
    _("progressBar").value = 0; 
} 
</script> 

<form method="post" action="actiontest.php" id="form1" name='mainForm' enctype="multipart/form-data" OnSubmit="return CheckForm()"> 
<input type="text" id="Customer "name="Customer" placeholder="Customer" required/><br> 
<input type="file" name="file1" id="file1"><br> 
<input type="button" value="Upload File" onclick="uploadFile()"> 
<progress id="progressBar" value="0" max="100" style="width:100%;"></progress> 
</form> 

Answer 2

Очевидно, так как вы первый загрузить его с помощью JavaScript, то в качестве нормальной формы пост, когда форма была отправлена. Попробуйте очистить и удалить входной файл после успешной загрузки javascript, чтобы предотвратить его повторное добавление и, возможно, даже автоподтвердить форму, чтобы пользователь не выполнял ее вручную. Попробуйте это:

<form method="post" action="../../assets/php/actiontest.php" name="mainForm" name="mainForm" enctype="multipart/form-data" OnSubmit="return CheckForm()"> 
<input type="text" name="Customer" placeholder="Customer" required/><br> 
<input type="file" name="file1" id="file1"><br> 
<input type="button" id="uploadButton" value="Upload File" onclick="uploadFile()"> 
<progress id="progressBar" value="0" max="100" style="width:100%;"></progress> 
<input type="submit" id="submit" />  
</form> 

<script type="text/javascript"> 
function _(el){ 
    return document.getElementById(el); 
} 
function uploadFile(){ 
    var file = _("file1").files[0]; 
    var formdata = new FormData(); 
    formdata.append("file1", file); 
    var ajax = new XMLHttpRequest(); 
    ajax.upload.addEventListener("progress", progressHandler, false); 
    ajax.addEventListener("load", completeHandler, false); 
    //ajax.open("POST", "file_upload_parser.php"); 
    ajax.open("POST", "../../assets/php/actiontest.php"); 
    ajax.send(formdata); 
} 
function progressHandler(event){ 
    var percent = (event.loaded/event.total) * 100, 
     file = _("file1"), 
     uploadButton = _("uploadButton"), 
     mainForm = _("mainForm"); 
    _("progressBar").value = Math.round(percent); 
    if(percent == 100) { 
    file.remove(); 
    uploadButton.remove(); 
    mainForm.submit(); 
    } 
} 
function completeHandler(event){ 
    _("progressBar").value = 0; 
} 
</script> 

Лучший подход может быть как загрузить файл и послать остальные данные формы с помощью JavaScript и просто пропуская всю Submit-фазу. Просто перенаправьте пользователя с помощью javascript на успех.

Answer 3

Вам необходимо либо принять входной файл из формы тегов, написать сценарий представления пользовательской формы, или установить поле файла отключена, когда кнопка отправки нажата, последний, вероятно, лучше всего

Answer 4

Поскольку у вас есть поле ввода файла, когда форма отправлена, он будет принимать значение в форме и загружать его. Сброс полей файлов с поддержкой нескольких браузеров - боль.

Вы можете попробовать что-то вроде этого:

• после загрузки файла закончена, удалить элемент из DOM и показать ссылку для восстановления.
• Если пользователь хочет загрузить другой файл, он нажимает на эту ссылку , а затем снова вводит поле ввода файла.