上传文件时如何向服务器发送数据？ [英] How to send data to server while upload file?
问题描述
当用户上传图片到服务器时，图片必须像pkUsre.extention，exemple 1.jpg那样存储，其中数字1是用户主键。
我有下面的代码，工作正常上传文件，但我不知道如何发送pkUser到图片的服务器。任何想法如何做到这一点？
// Html代码
< div class =row>
< input type =filename =fileToUploadid =fileToUploadonchange =fileSelected（）;/>
< / div>
< div id =fileName>< / div>
< div id =fileSize>< / div>
< div id =fileType>< / div>
< div class =row>
< input type =buttonid =btnSdvalue =Upload/>
< / div>
< div id =progressNumber>< / div>
< / form>
PHP代码
if（move_uploaded_file（$ _FILES ['fileToUpload'] ['tmp_name']，pic /）basename（$ _ FILES ['fileToUpload'] ['name '））））{
echo basename（$ _ FILES ['fileToUpload'] ['name']）;
}
else {
echo上传文件时出现问题，请重试。
}
// Javascript代码
< script type =text / javascript>
函数fileSelected（）{
var file = document.getElementById（'fileToUpload'）。files [0];
if（file）{
var fileSize = 0; （file.size> 1024 * 1024）
fileSize =（Math.round（file.size * 100 /（1024 * 1024））/ 100）.toString（）+'MB';
else
fileSize =（Math.round（file.size * 100/1024）/ 100）.toString（）+'KB';
document.getElementById（'fileName'）。innerHTML ='Name：'+ file.name;
document.getElementById（'fileSize'）。innerHTML ='Size：'+ fileSize;
document.getElementById（'fileType'）。innerHTML ='Type：'+ file.type;
function uploadFile（）{
var fd = new FormData（）;
fd.append（fileToUpload，document.getElementById（'fileToUpload'）。files [0]）;
var xhr = new XMLHttpRequest（）;
xhr.upload.addEventListener（progress，uploadProgress，false）;
xhr.addEventListener（load，uploadComplete，false）;
xhr.addEventListener（error，uploadFailed，false）;
xhr.addEventListener（abort，uploadCanceled，false）;
xhr.open（POST，uploadFoto.php）;
xhr.send（fd）;
函数uploadProgress（evt）{
if（evt.lengthComputable）{
var percentComplete = Math.round（evt.loaded * 100 / evt.total ）;
document.getElementById（'progressNumber'）。innerHTML = percentComplete.toString（）+'％';
else {
document.getElementById（'progressNumber'）。innerHTML ='无法计算';
function uploadComplete（evt）{
/ *当服务器发送回应时引发此事件* /
alert（evt .target.responseText）;
function uploadFailed（evt）{
alert（试图上传文件时出现错误。
function uploadCanceled（evt）{
alert（上传已被用户取消或浏览器断开连接。
}
< / script>
< script type =text / javascript>
$（document）.on（click，#btnSd，function（）{
uploadFile（）;
}）;
< / script>
最后我开发了一个解决方案。 b
$ b
- 将一个类fileUpload添加到将要保存要上传的文件的输入元素中。
- 设置一个id作为东西-PKUser。我坐在id =fileUpload-1动态创建惠特php。
- 在上面的JavaScript代码做一些改变。转到函数uploadFile（）并创建一个参数n。它会像这样uploadFile（n）。
-
在这个函数里面，到fd.append（...，...）部分，改变第一个第二个参数'fileToUpload'为n，你已经创建了。您将获得以下内容：
fd.append（fileToUpload，document.getElementById（'fileToUpload'）。files [0]）;
由此更改：
fd .append（n，document.getElementById（n）.files [0]）;
现在您必须更改jquery代码：
之前是这样的：
$（document）.on（click，#btnSd，function（）{
uploadFile（）;
}）;
现在就是这样：
<$ p $（）。fileToUpload）。attr（'id'））$ p> $（document）.on（click，#btnSd ;
}）;
最后，ajax将发送数据到服务器。我们可以用php substrigs函数清除字符串。这是我的解决方案：
$ foreach（$ _FILES as $ key => $ value）{
$ arrFile = $关键;
$ pkUser = substr（$ arrFile，（int）$ pos = strpos（$ arrFile， - ）+ 1）;
$ filename = $ _ FILES [$ arrFile] ['name'];
$ ext = substr（$ filename，strpos（$ filename，。））;
}
$ finalName = $ pkUser。$ ext;
if（move_uploaded_file（$ _FILES [$ arrFile] ['tmp_name']，pic /\".$ finalName））{
echo $ finalName;
}
else {
echo上传文件时出现问题，请重试。
}
最后这个效果很好！我可以发送用户的主键和我想要的商店。
When a user uploads a picture to a server, the picture must to be stored like pkUsre.extention, exemple 1.jpg, where the number 1 is the users primary key. I have the follow code that works fine to upload the file, but I dont know how to send the pkUser to server with the picture. Any idea how to do that?
//Html code
<form id="form1" enctype="multipart/form-data" method="post" >
<div class="row">
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" id="btnSd" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
//PHP code
if ( move_uploaded_file( $_FILES['fileToUpload']['tmp_name'], "pic/". basename($_FILES['fileToUpload']['name']) ) ) {
echo basename($_FILES['fileToUpload']['name']);
}
else {
echo "There was a problem uploading your file - please try again.";
}
//Javascript code
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "uploadFoto.php");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
<script type="text/javascript">
$(document).on("click", "#btnSd", function(){
uploadFile();
});
</script>
Finally I developed a solution.
- Add a class "fileUpload" to the input element that will hold the file to be uploaded.
- Set a id as something-pkUser. I sit id="fileUpload-1" dynamically created whit php.
- Make a little change on the javascript code above. Go to the function uploadFile() and create a parameter "n". It will be like that uploadFile(n).
Inside this function go to the fd.append(...,...) part and change the first an second parameter 'fileToUpload' for "n", you have created. You will have the follow:
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
changed by this:
fd.append(n, document.getElementById(n).files[0]);
Now you must change jquery code:
before was that:
$(document).on("click", "#btnSd", function(){
uploadFile();
});
Now will be like that:
$(document).on("click", "#btnSd", function(){
uploadFile($(".fileToUpload").attr('id'));
});
And finally, ajax will send will send data to server. We can clear the string with php substrigs functions. This was my solution:
foreach ($_FILES as $key => $value) {
$arrFile = $key;
$pkUser = substr($arrFile,(int)$pos=strpos($arrFile, "-")+1);
$filename=$_FILES[$arrFile]['name'];
$ext = substr($filename,strpos($filename, "."));
}
$finalName=$pkUser.$ext;
if ( move_uploaded_file( $_FILES[$arrFile]['tmp_name'], "pic/".$finalName ) ) {
echo $finalName;
}
else {
echo "There was a problem uploading your file - please try again.";
}
Finally this works good! I can send the user's primary key and store as I want.
这篇关于上传文件时如何向服务器发送数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
