通过ajax和jquery从另一个php文件上传图像后显示图像
[英]Display the image after uploading it from another php file through ajax and jquery
问题描述
When the page is loaded, the image specified in src is displayed.When a user clicks on the form to upload the image,everything works fine except the image on the page does not change. 
加载页面后，将显示src中指定的图像。当用户单击表单上载图像时，除页面上的图像不变外，其他所有操作均正常。 It is because when the user clicks on the form to upload the image, he is directed to php file 2 but from there there is no request to change the image in php file 1. How can I achieve this (using ajax and jquery)? 这是因为，当用户单击表单上载图像时，他被定向到php文件2，但是从那里没有更改php文件1中的图像的请求。我该如何做到这一点（使用ajax和jquery）？
2 个解决方案
解决方案1
2 已采纳 2014-06-01 12:36:40
Try this code. 试试这个代码。 This is the core. 这是核心。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#imgInp').on('change', function() {
readPath(this);
});
});
function readPath(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1">
<input type='file' id="imgInp" />
<img id="blah" src="#" width="500px" height="200px" alt="your image" />
</form>
</body>
</html>
解决方案2
0 2014-06-01 17:09:29
Here is another code snippet. 这是另一个代码段。 Check your conditions in the server part and don't forget provide the locations correctly in server side and image src. 检查服务器部分中的条件，不要忘记在服务器端和image src中正确提供位置。
HTML Part HTML部分
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>
<img id="blah" src="#" width="500px" height="200px" alt="your image" />
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#blah").attr("src",response.responseText);
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
</body>
</html>
Upload.php Upload.php
<?php
//upload.php
$output_dir = "C:/wamp/www/";
if(isset($_FILES["myfile"]))
{
//Filter the file types , if you want.
if ($_FILES["myfile"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
echo $_FILES["myfile"]["name"];
}
}
?>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.