2016-02-06 3 views
0

Моя проблема заключается в том, что я не знаю, как отправлять текстовые значения ввода с помощью кода ниже.как отправить значение входного текста

Я нахожу этот код на каком-то веб-сайте, но я не знаю, как отправлять ему текстовые значения, потому что он отправляет только файлы.

<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 name = _("name").value; 
    // alert(file.name+" | "+file.size+" | "+file.type); 
    var formdata = new FormData(); 
    formdata.append("file1", file); 
    formdata.append("name", file); 
    var ajax = new XMLHttpRequest(); 
    ajax.upload.addEventListener("progress", progressHandler, false); 
    ajax.addEventListener("load", completeHandler, false); 
    ajax.addEventListener("error", errorHandler, false); 
    ajax.addEventListener("abort", abortHandler, false); 
    ajax.open("POST", "file_upload_parser.php"); 
    ajax.send(formdata); 
} 
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> 
</head> 
<body> 
<h2>HTML5 File Upload Progress Bar Tutorial</h2> 
<form id="upload_form" enctype="multipart/form-data" method="post"> 
    <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:300px;"></progress> 
    <input type="text" name="name" placeholder="title" id="name"/> 
    <h3 id="status"></h3> 
    <p id="loaded_n_total"></p> 
</form> 

И это PHP код:

<?php 
$fileName = $_FILES["file1"]["name"]; // The file name 
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder 
$fileType = $_FILES["file1"]["type"]; // The type of file it is 
$fileSize = $_FILES["file1"]["size"]; // File size in bytes 
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true 
$name = $_POST['name']; 
if (!$fileTmpLoc) { // if file not chosen 
    echo "ERROR: Please browse for a file before clicking the upload button."; 
    exit(); 
} 
if(move_uploaded_file($fileTmpLoc, "$fileName")){ 
    echo "$fileName upload is complete $name"; 
} else { 
    echo "move_uploaded_file function failed"; 
} 
?> 

Пожалуйста, помогите мне отредактировать мой код и спасибо.

+0

Вы просто хотите отправить значения входного текста? – kanudo

+0

@kanudo Да текстовые значения с файлом этот код отлично работает с файлами, но я не знаю, как отправлять текстовые значения –

+0

добавить дополнительные данные в объект 'formdata' - то есть:' formdata.append ('param', 'value') '? – RamRaider

ответ

1

Вам просто нужно изменить код

EDIT JS ИЗ

var formdata = new FormData(); 
formdata.append("file1", file); 
formdata.append("name", file); // IMPORTANT : FROM THIS 

EDIT JS К

var formdata = new FormData(); 
formdata.append("file1", file); 
formdata.append("name", name); // IMPORTANT : TO THIS 

FRONT END CODE

<head> 

<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 name = _("name").value; 
    // alert(file.name+" | "+file.size+" | "+file.type); 
    var formdata = new FormData(); 
    formdata.append("file1", file); 
    ///////////////////////////////////////////////////////////////////// 
    formdata.append("name", name); ////// formdata.append("name", file); 
    ///////////////////////////////////////////////////////////////////// 
    var ajax = new XMLHttpRequest(); 
    ajax.upload.addEventListener("progress", progressHandler, false); 
    ajax.addEventListener("load", completeHandler, false); 
    ajax.addEventListener("error", errorHandler, false); 
    ajax.addEventListener("abort", abortHandler, false); 
    ajax.open("POST", "file_upload_parser.php"); 
    ajax.send(formdata); 
} 
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> 
</head> 
<body> 
<h2>HTML5 File Upload Progress Bar Tutorial</h2> 
<form id="upload_form" enctype="multipart/form-data" method="post"> 
    <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:300px;"></progress> 
    <input type="text" name="name" placeholder="title" id="name"/> 
    <h3 id="status"></h3> 
    <p id="loaded_n_total"></p> 
</form> 

PHP КОД

$fileName = $_FILES["file1"]["name"]; // The file name 
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder 
$fileType = $_FILES["file1"]["type"]; // The type of file it is 
$fileSize = $_FILES["file1"]["size"]; // File size in bytes 
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true 
$name = $_POST['name']; 
if (!$fileTmpLoc) { // if file not chosen 
    echo "ERROR: Please browse for a file before clicking the upload button."; 
    exit(); 
} 
if(move_uploaded_file($fileTmpLoc, $fileName)){ 
    echo $fileName . 'upload is complete ' . $name; 
} else { 
    echo "move_uploaded_file function failed"; 
} 
+0

@grandor также смотреть 'move_uploaded_file ($ fileTmpLoc," $ fileName ")' я изменил его на 'move_uploaded_file ($ fileTmpLoc, $ fileName)', поскольку инвертированная запятая не требуется. – kanudo

0

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

Смежные вопросы