Question

加载页面时，会显示src中指定的图像。当用户单击表单上传图像时，除了页面上的图像不会改变外，一切正常。这是因为当用户点击表单上传图像时，他被定向到php文件2但是从那里没有请求更改php文件中的图像1.我怎样才能实现这一点（使用ajax和jquery）？

Answer 1

试试这段代码。这是核心。

<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>

Answer 2

这是另一个代码段。检查服务器部分中的条件，不要忘记在服务器端和映像src中正确提供位置。

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的

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

}
?>

通过ajax和jquery从另一个php文件上传后显示图像

2 个答案: