我想要更改此脚本,将其设置为文件上传,并让所有内容都从输入文字以外的文件进入数据库。我也希望它获取输入文字,然后将输入文字通过php插入数据库。有人可以帮忙吗?
<script>
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0]; //alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData(); formdata.append("file1", 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 while file is saved!";
}
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>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="text" id="Eid" name="name1" />
File:<input type="file" name="file1" id="file1"><br>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress><br />
<input type="button" value="Upload File" onclick="uploadFile()"><br />
<h3 id="status"></h3> <p id="loaded_n_total"></p>
</form>
Try to use this:
formdata.append("name1", $('#Eid').val());
I think it should work.
I guess you would have to append the input text value to the formdata parameter which is used for the ajax-request. Try adding the following:
formdata.append("name1", _("Eid").value);
after
var formdata = new FormData(); formdata.append("file1", file);
I have not testes this code, but by _("Eid")
you would get the input text element and by .value
its value. The in your php-script (file_upload_parser.php) you should be able to read the input fields value from the formdata parameter.
You are already using an append function to add the file to your formdata. So all you need to probably do is use the same function to append your input. Something like:
var formdata = new FormData();
formdata.append("file1", file);
// Add input field value
formdata.append("name1", _('Eid').value);