如何發送輸入文本值

我的問題是我不知道如何發送輸入文本值與下面的代碼。如何發送輸入文本值

我在一些網站上找到這個代碼，但我不知道如何發送輸入文本值，因爲它只發送文件。

<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"; 
} 
?>

請幫我編輯我的代碼，並感謝您。

來源

2016-02-06 Mourad karoudi

你只是想發送輸入文本值？ – kanudo

@kanudo是的文本值與文件此代碼工作完美的文件，但我不知道如何發送文本值 –

添加更多的數據到'formdata'對象 - 即：'formdata.append（'param'，'value' ）;'？ – RamRaider

你只需要改變代碼

編輯從JS

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

編輯JS來

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

前端代碼

<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"; 
}

來源

2016-02-06 11:26:22 kanudo

@grandor也觀看'move_uploaded_file（$ fileTmpLoc，「$ fileName」）'我將它改爲'move_uploaded_file（$ fileTmpLoc，$ fileName）'，因爲不需要反向逗號。 – kanudo

運行在您的completeHandler一個單獨的函數（），你的圖像上傳後通過AJAX上傳文本數據。

來源

2016-02-06 11:30:16 Bug

如何發送輸入文本值

回答

相關問題