我有一个配置文件页面,默认图像为(no-image.jpg)。下面有一个选项,用户可以上传他的图像。一旦用户选择了图像并在对话框中单击"打开",图像应该上传到服务器,响应应该用他的新图像替换(no-image.php)。我试着在谷歌上搜索并堆叠我需要的确切输出。但我找不到。
style
#upload_progress {display:none;}
HTML
<div id="upload_progress">
</div>
<form enctype="multipart/form-data" method="post" action="">
<input type="file" name="file" id="file" onchange="uploadFile()"/>
<input type="submit" name="submit" />
<form>
js
var handleUpload = function(event){
event.preventDefault();
event.stopPropagation();
var fileInput = document.getElementById('file');
var data = new FormData();
data.append('ajax', true)
data.append('file', fileInput.files);
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(event){
if(event.lengthComputable){
var percent = event.loaded /event.total;
var progress = document.getElementById('upload_progress');
while(progress.hasChildNodes()){
progress.removeChild(progress.firstChild);
}
progress.appendChild(document.createTextNode(Math.round(percent*100) + '%'))
}
});
request.upload.addEventListener('load', function(event){
document.getElementById('upload_progress').style.display = 'none';
});
request.upload.addEventListener('error', function(event){
alert('upload failed');
});
request.addEventListener('readystatechagne', function(event){
if(this.readyState == 4){
if(this.status == 200){
var links = document.getElementById('uploaded');
console.log(this.response);
var uploaded = eval(this.response);
var div, a;
div = document.createElement('div');
a = document.createelement(a);
a.setAttribute('href', 'files/'+uploaded);
a.appendChild(document.createTextNode(uploaded[i]));
div.appendChild(a);
links.appendChild(div);
}else{
}
}
});
request.open('POST', '/profile');
request.setRequestHeader('Cache-Control', 'no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);
}
window.addEventListener('load', function(event){
var submit = document.getElementById('submit');
submit.addEventListener('click', handleUpload);
});
PHP
if($_FILES['file'] != '')
{
//print_r($_FILES);
$filename = basename($_FILES['file']['name']);
$sqlUpdate = mysql_query("UPDATE tableA SET user_img = '".$filename."' WHERE email = '".$userEmail."'");
$newname = 'imagesprofile/'.$filename;
if($_FILES['file']['error'] == 0 && move_uploaded_file($_FILES['file']['tmp_name'], $newname));
$Uploaded = $filename;
}
if(!empty($_POST['ajax'])){
die(json_encode($Uploaded));
exit();
}
如有帮助,不胜感激。提前感谢!!。。。
据我所知(可能是我的知识已经过时了)你不能通过AJAX发送图像。
将您的表格更改为
<iframe id="hiddenIframe"></ifram>
<form enctype="multipart/form-data" method="post" action="pageGettingData.php" target="hiddenIframe">
<input type="file" name="file" id="file" onchange="uploadFile()"/>
<input type="submit" name="submit" />
<form>
并且在uploadFile()
函数中使用将提交表单的代码。
现在数据将以正常形式上传,但上传到一个隐藏的iframe,不会引起任何重定向等。
在您的PHP代码中
if($_FILES['file'] != '')
{
//print_r($_FILES);
$filename = basename($_FILES['file']['name']);
$sqlUpdate = mysql_query("UPDATE mp_project_buyer_query SET user_img = '".$filename."' WHERE email = '".$userEmail."'");
$newname = 'imagesprofile/'.$filename;
if($_FILES['file']['error'] == 0 && move_uploaded_file($_FILES['file']['tmp_name'], $newname));
$Uploaded = $filename;
echo '<script>parent.updateImage("' . $Uploaded . '");'; // add a javascript
}
if(!empty($_POST['ajax'])){
die(json_encode($Uploaded));
exit();
}
现在,当php获得一个图像时,它将调用一个JS函数,因为JS在隐藏的Iframe中,我们想在父文件上调用该函数。
在HTML文件中,创建一个新的JS函数updateImage
function updateImage(imgPath){
$('#userImage").attr('src': imgPath);
}
该JS将用新上传的图像路径更新图像路径。您可能需要修复变量和图像路径才能使其工作。我只是很快就写了